前段時間除了IPhone X后，開發(fā)的app出現(xiàn)了一個兼容性問題。嵌入app的頁面沒有全屏鋪滿。那會嘗試了一兩天的解決辦法，也沒成功，最后在網(wǎng)上找到了一個解決方案，就是在頭部加上這樣一行代碼<meta name="viewport" content="viewport-fit=cover">，剛開的簡書，因此重新在這里記錄下：

1、因為正常情況下會有上下兩個白色的邊框，如果網(wǎng)頁背景色不是白色或者其他單色的顏色會顯得非常突兀，

解決方式：給body標簽加上background-color，背景色為網(wǎng)頁顏色。

2、如果你喜歡對設(shè)計有額外的控制，或者使用漸變或圖像作為背景，那么設(shè)置背景顏色可能是不可行的。在蘋果的IOS的最新版本增加了viewport-fit，全屏幕顯示網(wǎng)頁，在meta表情把viewport設(shè)定為

3、設(shè)置safe-area-inset-*確保安全邊界：

因為橫屏?xí)r畫面右側(cè)會被那一塊感應(yīng)器給擋住，而Home Bar等空間由于保留給系統(tǒng)使用，鏈接也會失效，會造成體驗不良的狀況。Apple提供了幾個CSSProperties來處理：

constant（safe-area-inset-top）

constant（safe-area-inset-right）

constant（safe-area-inset-bottom）

constant（safe-area-inset-left）

在設(shè)置viewport-fit后使用這幾個css屬性：

.container{

? ? ?padding-top: constant(safe-area-inset-top);

? ? ?padding-top: constant(safe-area-inset-right);

? ? ?padding-top: constant(safe-area-inset-bottom);

? ? ?padding-top: constant(safe-area-inset-left);

}

就可以修正全屏?xí)r內(nèi)容與系統(tǒng)保留區(qū)重疊的問題。

上述參考自：http://blog.csdn.net/qq_36242361/article/details/78018845?locationNum=4&fps=1