几乎所有的前端开发者都会接触到为iphoneX设计H5网页,其中就得为其特有的安全区域做出适配,以便优化用户体验。
布局参考线定义了矩形区域,这些区域实际上不会出现在屏幕上,但有助于内容的定位、对齐和间距。这块区域就是安全区域,安全区域还可以防止内容在状态栏、导航栏、工具栏和选项卡栏的下方重叠,如下图蓝色区域:
Safari在新款iPhone X已经很好地适配了安全区域,你的H5网页在Safari打开是会在安全区域内的。如果你想要在Safari之外的浏览器打开你的H5网页,就得重新考虑一下安全区域的适配了。
viewport fit的默认值是auto,这将导致自动插入行为。为了禁用该行为并使页面布局为屏幕的最大尺寸,可以将viewport fit设置为cover
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
在设置了viewport fit之后,就需要将内容限定在安全区域之内。ios 11 Webkit提出了env()函数,用于设定安全区域与边界的距离,包括四个预定义的变量:
注意:当 viewport-fit=contain 时 env() 是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器,浏览器将会忽略它。
尤其注意很多小伙伴可能会想过使用constant()函数,在官方文档中指出:
因此 constant() 在 iOS11.2之后就不能再使用了,这方面还需要做一下兼容:
.post {
padding: 12px;
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
实际开发中,可没这么简单。设备横屏竖屏的状态都会导致safe-area-inset-bottom的对象不一致,这时候设置的值就会有问题。你就可以考虑使用数学计算了。。。
.post {
padding-bottom: max(12px, env(safe-area-inset-bottom));
}
在上面例子中:当设备竖屏是,拥有safe-area-inset-bottom,这时候基本上会大于12px,因此取值safe-area-inset-bottom;当横屏时,safe-area-inset-bottom为0,这时候会取默认12px,以致于横屏时页面底部不会太贴边。
你也可以使用calc()计算,不管safe-area-inset-bottom有没有,都设置12px的默认值。如下:
.post {
padding-bottom: calc(12px(默认值) + env(safe-area-inset-bottom));
}
如果你只是希望这种适配只针对iphoneX设备,那么你可以使用 @supports来对适配样式进行隔离。
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.post {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
以上几种方案仅供参考,有兴趣对iphone设备兼容的可以移步官方文档(底部参考链接)进行研究。
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
本文地址:https://blog.csdn.net/wuchen092832/article/details/107873498
如对本文有疑问, 点击进行留言回复!!
iPhone下载应用长时间转圈怎么办 iPhone无法下载或更新应用的解决办法
iPhone12值得入手吗 买iPhone12还是购买iPhone11
iPhone使用中变热怎么办 iPhone使用变热问题解决方法
5G版iPhone12售价是多少 5G版iPhone12各机型价格介绍
5G手机占比超过六成,让人吃惊的是4G版iPhone依然热销
室内定位方案部署WIFI定位还是IBeacon定位-新导智能
10·24会议后,27个省份将区块链写入政府报告,分别说了什么?
网友评论