當我們在為手機做H5頁面設計時（包括在WECTHEN方面的H5網頁設計），UI設計師和前端工程師肯定會被糾纏在沒有類似的移動端設計的情況下。如果它是一個應用程序設計者，它就不會那么糾結。

手機屏幕的尺寸和設計手稿的大小應作為標準尺寸?，F在我們有2K分辨率的屏幕，設計草案也應該設計最大分辨率的高度。顯然不是。

注意：（所有以下內容和規范將視圖設置為內容=寬度=設備寬度）是我們的H5頁前端代碼必須包含

元內容＝初始規模＝1，用戶可擴展性＝否，最大規模＝1，寬度＝設備寬度名稱＝視口/

在這里，25所學校還列出了當前最受歡迎手機的規格和尺寸規格：智能手機尺寸圖，值得一看。

感興趣的合作伙伴可以嘗試不同的大小，例如1次、2次、3次。最后的測試結果是，H5的設計草稿通常被設計為640x1136px，它不僅滿足顯示的需要，而且還減少了用戶加載圖片所需的帶寬。

當您可以使用具有不同分辨率的移動智能手機查看我們設計的H5頁面時，當然會有以下內容：內容不完整，甚至一些重要內容和按鈕將被阻塞。

第二：當我們進行H5頁面內容規劃的布局和布局時，我們不能把重要內容放在太低或部分的位置，否則前端布局可能會出現在內容不完整的情況下。

因為Android系統可以改變狀態欄和導航欄的高度，所以在網絡上可以提供48 px和100px的默認值。

然后頁面的內容將被壓縮到盲區（根據不同的布局可以被擠壓出視口，也就是說，在視域下），取這兩個系統的最大值是148（48＋100），如下面的圖5所示，設計草稿應該嘗試EnSU。Re沒有一個重要的內容低于一頁。

所以在所有的屏幕尺寸上都要顯示出重要的內容，你應該注意市面上的小型手機屏幕的存在，絕大多數智能手機現在的分辨率都在640X960PX（iPoNe4分辨率）以上，所以只需把重要內容放在圖5的盲區，計算后最安全高度為812（960-148＝812）。

在本綜述中，一般來說，在現有市場上流行的移動智能手機中，單頁翻轉（非延伸向下長頁）設計草稿為6401136，安全線（參考線）設置在812的高度，并且重要內容放置在安全線上。

2。任何圖片作為數據信息都存儲在存儲盤中，只有寬素數和高素數才是有意義的。在這一點上，PPI對圖片沒有意義，也沒有用英寸來描述圖片的寬度或高度，但是只有在打印出來之后，它才有PPI的含義并被打印出來。

3，當設計一個H5頁面在平時的原型時，產品經理的原型草稿建議了一個寬屏幕的3PX，使用這個尺寸便于瀏覽（現在很多手機屏幕已經達到1440px，使用這個大小來模擬顯然是不現實的）。

4，在設計草稿時，設計者應將原型手稿的所有尺寸制成2次，在移動設備上預覽設計草稿可以確保清晰。根據當前流行的慣例，前端切片可以直接用于原型尺寸，即：是設計草案的1／2。

5，一般來說，H5頁面設計草案是以640x1136px為最安全的大小，在812px的高度增加一條安全線，這條線上的重要內容（因特網上的一些文章說安全線是960px，個人認為它不是太準確）。ISPATH在移動設備上是清晰的，并且還確保了材料的最小尺寸。

智能地圖智能自動優化平臺為您的圖片智能選擇合適的圖片格式，為您壓縮圖片，以節省帶寬優化體驗，為您提供WebP圖片，讓您的站點高高在上

2。（手機應用程序設計必備的圖片壓縮偽品TiNYPNG），這里圖片壓縮還是相當容易使用的，可以節省用戶大量的帶寬。