对于
iPhone
系列出的越来越多,如果只是使用@media
来做适配的话,老代码想要适配新机型还是有一定局限性的。
今天去搜了搜相关的解决方法,那么就来总结一下。
安全区
早期苹果对于 iPhone X 的设计布局意见如下:
核心内容应该处于 Safe area 确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海) 以及底部的 Home Indicator 遮挡。也就是说 我们设计显示的内容应该尽可能的在安全区域内。
区域划分
下面两张图简单的描述了安全区域的划分细节:
适配方案
通过在meta
标签中设置viewport-fit
来实现安全区适配
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
viewport-fit
取值:
值 | 描述 |
---|---|
viewport-fit=auto | 默认值,页面内容显示在safe area内 |
viewport-fit=cover | 页面内容充满屏幕 |
CSS constant()函数与env()函数
在iOS 11
中的webkit
包含了一个新的CSS函数constant()
,以及一组四个预定义的常量:safe-area-inset-left
, safe-area-inset-right
, safe-area-inset-top
和 safe-area-inset-bottom
。当合并一起使用时,允许样式引用每个方面的安全区域的大小。
只有当我们设置 viewport-fit=cover
的时候上述的常量才能生效。
写法如下:
/* 兼容 iOS < 11.2 */
body {
padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
/* 兼容 iOS >= 11.2 */
body {
padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: env(safe-area-inset-left); //如果未竖屏时为0
padding-right: env(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: env(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
因此在我们做iPhone适配的时候,最好是constant
和env
一起使用。