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

2021-09-06 12:04:27 字數 1940 閱讀 7108

一、手機頁面的標準頭規範

字元編碼使用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聯合發布的《2023年中國移動網際網路與3g使用者調查報告》顯示,

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

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

uc手機瀏覽器份額11.2%,

opera手機瀏覽器份額1.8%,

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

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

五、手機頁面製作心得:

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

2.無論是普通的手機或者智慧型機,似乎都不太支援js。類似和"alert()"都不支援。

3.手機對「」的樣式支援不是太好,同樣的**在瀏覽器上和手機上有一定的寬度差距,在給定寬度的情況下。所以我的建議是能不用按 鈕,就不用按鈕,可以用文字的超連結形式代替, 或者也可以考慮使用小圖示。

4.列表頁面最好用table,不要用ul li,或者p+空格,一方面是排版,一方面是如果某一列的元素過長,可以使用「table tr td」,而另外兩種方案只能擷取字串了。

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

手機web頁面製作一些注意事項

一關於手機頁面的標準頭 字元編碼使用utf 8 指定頁面手機記憶體快取中的儲存時間段 minimum scale 1.0 maximum scale 2.0 device width通知瀏覽器使用裝置的寬度作為可視區的寬度 initial scale 初始的縮放比例 minimum scale 允許...

無線頁面製作注意事項!

第乙個meta標籤表示 強制讓文件的寬度與裝置的寬度保持1 1,並且文件最大的寬度比例是1.0,且不允許使用者點選螢幕放大瀏覽 第二個meta標籤是iphone裝置中的safari私有meta標籤,它表示 允許全屏模式瀏覽 第三個meta標籤也是iphone的私有標籤,它指定的iphone中safa...

手機wap頁面的注意事項

1.文字不能直接被body包含,需用 2.用p代替li 3.ucweb6.0不支援背景圖,含有背景圖的效果需設定相近的背景色。4.頁面申明採用 編碼需用utf 8 5.採編頭部包含檔案 和web有區別,wap中為 page pageencoding gbk include file waptempl...