請注意：（以下所有討論內容和規范均將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