前段時(shí)間除了IPhone X后派任,開發(fā)的app出現(xiàn)了一個(gè)兼容性問題砸逊。嵌入app的頁面沒有全屏鋪滿。那會(huì)嘗試了一兩天的解決辦法掌逛,也沒成功师逸,最后在網(wǎng)上找到了一個(gè)解決方案,就是在頭部加上這樣一行代碼<meta name="viewport" content="viewport-fit=cover">颤诀,剛開的簡書字旭,因此重新在這里記錄下:
1、因?yàn)檎G闆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