使用H5寫(xiě)移動(dòng)端代碼時(shí)门岔，經(jīng)常會(huì)遇到在PC端顯示正常，但到移動(dòng)端毁习，會(huì)出現(xiàn)很多問(wèn)題智嚷。常見(jiàn)問(wèn)題如下：
- 移動(dòng)端的雙擊或者雙指縮放會(huì)引發(fā)整個(gè)網(wǎng)頁(yè)的縮放；
- 整體顯示比例太小蜓洪，和PC端差距大纤勒；
- 劉海屏，安全區(qū)問(wèn)題隆檀。
問(wèn)題1&&2解決方法
問(wèn)題1和2摇天，可以根據(jù)對(duì)meta標(biāo)簽的配置解決。如下：
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
將meta標(biāo)簽的name設(shè)置為viewport恐仑， viewport提供有關(guān)視口初始大小的提示泉坐，僅供移動(dòng)設(shè)備使用。當(dāng)name屬性為viewport時(shí)裳仆，其content有如下屬性?xún)?nèi)容腕让。經(jīng)過(guò)上述配置即可解決縮放以及顯示比例的問(wèn)題。
content內(nèi)容
問(wèn)題3解決方法
需要在上述meta標(biāo)簽中加入新的屬性viewport-fit
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"/>
這樣整體的網(wǎng)頁(yè)就會(huì)填充屏幕的所有部分歧斟。
對(duì)于安全區(qū)纯丸，如果需要留出，可在css中進(jìn)行設(shè)置静袖。env(safe-area-inset-left)和const(safe-area-inset-left)會(huì)給出安全區(qū)的距離觉鼻。當(dāng)然設(shè)置在哪里，需要根據(jù)整體頁(yè)面結(jié)構(gòu)來(lái)看队橙。
padding-left: env(safe-area-inset-left);
padding-left: const(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-right: const(safe-area-inset-right);
height:env(safe-area-inset-top);
height:constant(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
padding-bottom:constant(safe-area-inset-bottom);
