當(dāng)我們?cè)跒槭謾C(jī)做H5頁面設(shè)計(jì)時(shí)（包括在WECTHEN方面的H5網(wǎng)頁設(shè)計(jì)），UI設(shè)計(jì)師和前端工程師肯定會(huì)被糾纏在沒有類似的移動(dòng)端設(shè)計(jì)的情況下。如果它是一個(gè)應(yīng)用程序設(shè)計(jì)者，它就不會(huì)那么糾結(jié)。

手機(jī)屏幕的尺寸和設(shè)計(jì)手稿的大小應(yīng)作為標(biāo)準(zhǔn)尺寸?，F(xiàn)在我們有2K分辨率的屏幕，設(shè)計(jì)草案也應(yīng)該設(shè)計(jì)最大分辨率的高度。顯然不是。

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

元內(nèi)容＝初始規(guī)模＝1，用戶可擴(kuò)展性＝否，最大規(guī)模＝1，寬度＝設(shè)備寬度名稱＝視口/

在這里，25所學(xué)校還列出了當(dāng)前最受歡迎手機(jī)的規(guī)格和尺寸規(guī)格：智能手機(jī)尺寸圖，值得一看。

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

當(dāng)您可以使用具有不同分辨率的移動(dòng)智能手機(jī)查看我們?cè)O(shè)計(jì)的H5頁面時(shí)，當(dāng)然會(huì)有以下內(nèi)容：內(nèi)容不完整，甚至一些重要內(nèi)容和按鈕將被阻塞。

第二：當(dāng)我們進(jìn)行H5頁面內(nèi)容規(guī)劃的布局和布局時(shí)，我們不能把重要內(nèi)容放在太低或部分的位置，否則前端布局可能會(huì)出現(xiàn)在內(nèi)容不完整的情況下。

因?yàn)锳ndroid系統(tǒng)可以改變狀態(tài)欄和導(dǎo)航欄的高度，所以在網(wǎng)絡(luò)上可以提供48 px和100px的默認(rèn)值。

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

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

在本綜述中，一般來說，在現(xiàn)有市場(chǎng)上流行的移動(dòng)智能手機(jī)中，單頁翻轉(zhuǎn)（非延伸向下長(zhǎng)頁）設(shè)計(jì)草稿為6401136，安全線（參考線）設(shè)置在812的高度，并且重要內(nèi)容放置在安全線上。

2。任何圖片作為數(shù)據(jù)信息都存儲(chǔ)在存儲(chǔ)盤中，只有寬素?cái)?shù)和高素?cái)?shù)才是有意義的。在這一點(diǎn)上，PPI對(duì)圖片沒有意義，也沒有用英寸來描述圖片的寬度或高度，但是只有在打印出來之后，它才有PPI的含義并被打印出來。

3，當(dāng)設(shè)計(jì)一個(gè)H5頁面在平時(shí)的原型時(shí)，產(chǎn)品經(jīng)理的原型草稿建議了一個(gè)寬屏幕的3PX，使用這個(gè)尺寸便于瀏覽（現(xiàn)在很多手機(jī)屏幕已經(jīng)達(dá)到1440px，使用這個(gè)大小來模擬顯然是不現(xiàn)實(shí)的）。

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

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

智能地圖智能自動(dòng)優(yōu)化平臺(tái)為您的圖片智能選擇合適的圖片格式，為您壓縮圖片，以節(jié)省帶寬優(yōu)化體驗(yàn)，為您提供WebP圖片，讓您的站點(diǎn)高高在上

2。（手機(jī)應(yīng)用程序設(shè)計(jì)必備的圖片壓縮偽品TiNYPNG），這里圖片壓縮還是相當(dāng)容易使用的，可以節(jié)省用戶大量的帶寬。