手機-wap頁面制作注意事項
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
部分手機瀏覽器對如下css樣式支持不是很好,建議慎重使用
一、關于css樣式: 1、頁面自帶css建議style標簽頭標準化,格式:id="internalStyle"> 2、部分手機瀏覽器對如下css樣式支持不是很好,建議慎重使用: ·不支持font-family屬性,也就是說,在很多瀏覽器可能只有一種默認字體; ·不支持font-szie屬性,如在UC瀏覽器你只能看到一樣大小的字體; ·不支持width、height、padding、margin、line-height屬性,如,在UC瀏覽器只能通過p、br 等HTML標簽來換行以達到字符上下間隔; ·不支持固定像素的寬度,100%顯示頁面,如:在UC瀏覽器始終將看到的是“滿屏的”; ·不支持浮動、層疊布局,float和position屬性無效,如:在UC瀏覽器你只能看到 “左對齊”,建議使用table格局。 ·支持background-color,但不支持background-image,也就是說不支持CSS背景圖顯示,在UC瀏覽器你只能看到背景色,為了手機的流量,提倡盡量少用背景圖。 ·max-device-width這樣的選項,限定屏幕寬度小于480的設備才采用該樣式表。代碼格局如下: <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet" /> 二、關于手機頁面的標準頭: 1、字符編碼使用utf-8:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 2、指定頁面手機內存緩存中的存儲時間段:<meta http-equiv="Cache-Control" content="no-cache"/> 3、<meta name="viewport" content="width=device-width; initial-scale=1.0;minimum-scale=1.0; maximum-scale=2.0"/> device-width通知瀏覽器使用設備的寬度作為可視區的寬度 initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 4、解決原先在Pocket PC 2002上能夠全螢幕顯示的Flash影片(240×320),到了Pocket PC2003之后,自動會縮小的問題:<meta name="MobileOptimized" content="240"/> 三、其他: 1、網頁大小限制:建議低版本頁面不超過15k,高版本頁面不超過60k; 2、部分手機不支持png8和png24,所以盡量使用jpg和gif的圖片; 3、另外對于平滑的漸變等精細的圖片細節,部分手機的色彩支持度并不能達到要求,所以慎用有平滑漸變的bar設計; 4、部分手機對于超大圖片,既不進行縮放,也不顯示橫下滾動條; 5、少數手機在打開超過20k的測試頁面時,會顯示內存不足; 6、大部分手機不支持表單元素的“disable”屬性; 7、在手持設備上,按鈕最好不要直接用img標簽,如<input type="image" src="圖片路徑" name="Submit" value="" />。 四、瀏覽器使用情況: 1、手機自帶瀏覽器市場份額高達49.6%;2、在現有手機瀏覽器品牌中; 3、騰訊手機瀏覽器份額27.3%; 4、UC手機瀏覽器份額11.2%; 5、Opera手機瀏覽器份額1.8%; 6、其他手機瀏覽器份額2.4%。 該文章在 2014/4/5 23:10:35 編輯過 |
關鍵字查詢
相關文章
正在查詢... |