iphonex web兼容viewport-fit=cover 及height:100%问题解决

分类: php 发布时间: 2018-03-01 16:39 浏览: 278 次

苹果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;}
}

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!