前段時(shí)間除了IPhone X后派任，開發(fā)的app出現(xiàn)了一個(gè)兼容性問題砸逊。嵌入app的頁面沒有全屏鋪滿。那會(huì)嘗試了一兩天的解決辦法掌逛，也沒成功师逸，最后在網(wǎng)上找到了一個(gè)解決方案，就是在頭部加上這樣一行代碼<meta name="viewport" content="viewport-fit=cover">颤诀，剛開的簡書字旭，因此重新在這里記錄下：
1、因?yàn)檎Ｇ闆r下會(huì)有上下兩個(gè)白色的邊框崖叫，如果網(wǎng)頁背景色不是白色或者其他單色的顏色會(huì)顯得非常突兀遗淳，
解決方式：給body標(biāo)簽加上background-color，背景色為網(wǎng)頁顏色心傀。
2屈暗、如果你喜歡對(duì)設(shè)計(jì)有額外的控制，或者使用漸變或圖像作為背景脂男，那么設(shè)置背景顏色可能是不可行的养叛。在蘋果的IOS的最新版本增加了viewport-fit，全屏幕顯示網(wǎng)頁宰翅，在meta表情把viewport設(shè)定為
3弃甥、設(shè)置safe-area-inset-*確保安全邊界：
因?yàn)闄M屏?xí)r畫面右側(cè)會(huì)被那一塊感應(yīng)器給擋住，而Home Bar等空間由于保留給系統(tǒng)使用汁讼，鏈接也會(huì)失效淆攻，會(huì)造成體驗(yàn)不良的狀況。Apple提供了幾個(gè)CSSProperties來處理：
constant（safe-area-inset-top）
constant（safe-area-inset-right）
constant（safe-area-inset-bottom）
constant（safe-area-inset-left）
在設(shè)置viewport-fit后使用這幾個(gè)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
