h5 頁面設計尺寸

請注意：（如下全部討論內容和規範均將viewport設定爲content=」width=device-width」的狀況下） 也就是咱們的H5頁面前端代碼裏面必須包含

<meta content=」initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width」 name=」viewport」 />

<meta content=」telephone=no」 name=」format-detection」 />

根據目前市場流行的手機移動終端，統計他們的設備獨立像素。

 

 

H5的設計稿通常設計爲640x1136px便可。 既知足了顯示需求，又能下降用戶加載圖片須要的帶寬。

 

 

能夠用各類分辨率的移動智能手機查看咱們設計的H5頁面時，固然，也會出現以下的狀況，內容顯示不全，甚至一些重要內容和按鈕都會被遮擋。

第一：背景圖片必須採用background-size:cover;來實現。

第二：咱們在進行H5頁面內容規劃佈局設計的時候，不能把重要內容放在太偏下的位置或者偏上，不然前端佈局時可能出現內容顯示不全的狀況。

 

 

過對比可得：

除去將瀏覽器全屏顯示的狀況，幾乎全部狀況均會有頂部的狀態欄和導航欄。

iPhone的設計標準，狀態欄和導航欄的獨立像素高度分別爲40px和88px。

因爲Android系統能夠更改狀態欄和導航欄的高度，這裏能夠取默認值爲48px和100px（這些尺寸網上都可查）。

那麼就會把網頁內容往下擠，進入盲區（根據不一樣的佈局方式可能擠出視口，便可視區域之下，）。取這兩個系統者的最大值爲148（48+100）,以下圖5，設計稿要儘可能保證單頁下面沒有重要內容。

圖5

那麼在全部屏幕大小上把重要內容顯示徹底，就要注意市面上存在的小尺寸手機屏幕，如今絕大部分智能手機分辨率都在640x960px（iPhone4分辨率）之上，因此只要把重要內容放在上圖5中的盲區之上便可。計算後的最安全高度爲812（960-148=812）。

在此總結，通常狀況下，以現有市場上流行的移動智能手機，單頁翻轉（非延伸向下的長頁面）設計稿尺寸爲640×1136，在高度爲812處設置一條安全線（參考線），將重要的內容佈局在這條安全線之上。

 

 

 

 

來自：http://www.chinaz.com/design/2015/1103/465670.shtml