手機web頁面制作時的注意事項


一、手機頁面的標准頭規范

字符編碼使用utf-8:指定頁面手機內存緩存中的存儲時間段

device-width:通知瀏覽器使用設備的寬度作為可視區的寬度

initial-scale - 初始的縮放比例

minimum-scale - 允許用戶縮放到的最小比例

maximum-scale - 允許用戶縮放到的最大比例

--------解決原先在Pocket PC 2002上能夠全螢幕顯示的Flash影片(240×320),到了Pocket PC2003之后,自動會縮小的問題。


二、手機頁面的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的設備才采用該樣式表。

三、其他

1.網頁大小限制:建議低版本頁面不超過15k,高版本頁面不超過60k。

2.部分手機不支持png8和png24,所以盡量使用jpg和gif的圖片;

3.另外對於平滑的漸變等精細的圖片細節,部分手機的色彩支持度並不能達到要求,所以慎用有平滑漸變的bar設計;

4.部分手機對於超大圖片,既不進行縮放也不顯示橫下滾動條;

5.少數手機在打開超過20k的測試頁面時,會顯示內存不足

6.大部分手機不支持表單元素的“disable”屬性,部分手機不支持的"button"標簽,“input【type=file】"標簽,"iframe"標簽。少數手機不支持”select“標簽。

7.在手持設備上,按鈕最好不要直接用img標簽

四、瀏覽器使用情況:

CNNIC與CR-Nielsen聯合發布的《2009年中國移動互聯網與3G用戶調查報告》顯示,

手機自帶瀏覽器市場份額高達49.6%,

在現有手機瀏覽器品牌中,

騰訊手機瀏覽器份額27.3%,

UC手機瀏覽器份額11.2%,

Opera手機瀏覽器份額1.8%,

其他手機瀏覽器份額2.4%。

盡管今年 UC瀏覽器扳回一城,重新超越了QQ瀏覽器,但不排除有隨時被對方超越的可能。

五、手機頁面制作心得:

 1.手機頁面的寬度最好控制在240px以內,因為這樣可以在不移動屏幕的情況下進行一系列的操作。

2.無論是普通的手機或者智能機,似乎都不太支持js。類似<a href="javascript:history.back()">和"alert()"都不支持。

3.手機對“<input type="button">”的樣式支持不是太好,同樣的代碼在瀏覽器上和手機上有一定的寬度差距,在給定寬度的情況下。所以我的建議是能不用按 鈕,就不用按鈕,可以用文字的超鏈接形式代替, 或者也可以考慮使用小圖標。

4.列表頁面最好用table不要用ul li,或者p+空格,一方面是排版,一方面是如果某一列的元素過長,可以使用“table tr td{word-break:break-all;}”,而另外兩種方案只能截取字符串了。

5.大圖片的存在還是有一定的必要,比如說像導航圖,會給人一種炫麗的感覺,但是圖片也不能過大,一定要控制在10K以內。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM