iphonex web兼容viewport-fit=cover 及height:100%問題解決

分類: php 發布時間: 2018-03-01 16:39 瀏覽: 5,750 次

蘋果iphonex出了 viewport-fit 這個屬性來斛劉海全屏的問題,設置了這個屬性后,頁面就會填充整個劉海區域(前提是瀏覽器或套頁面的app必須做了iphonex的兼容)。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 

上面屬性設置之后,再把html,boby高度設置成100% 發現底部出現空白沒有填滿,這主要是這里的100%,只是安全區域的高度,是不包含非安全區域的。要使頁面元素(如:iframe)滿屏, 就要把html,body高度設置成 812px(包含非安全區域)。css兼容如下:

 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
html,body{height: 812px;}
}

如果覺得我的文章對您有用,請隨意打賞。您的支持將鼓勵我繼續創作!

天下蓝月亮资料精选大全