iPhone X/11系列机型取消了传统的物理按键(Home键),取而代之的是底部小黑条(Home Indicator)。并且,屏幕显示区域也不再是方方正正的矩形,而是带有圆角的不规则图形。iPhone X 视图窗口如下图蓝色区域所示:
这一变动使得在网页开发中,需重新考虑页面视图区域以及底部与小黑条的适配,尤其是吸底导航、吸底操作区等相对页面fixed
的元素。
为了正确的进行适配,我们需要了解几个新的概念和属性。
安全区域iPhone X 正面屏幕部分包含了安全区域(Safe Area)、齐刘海(Sensor Housing)、底部小黑条(Home Indicator)。
安全区域指的是一个内容显示区域,处于其中的内容不会受到屏幕圆角、齐刘海和底部小黑条的影响,从而不会发生遮挡、裁剪等情况。安全区域如下图蓝色区域所示:
因此,我们应当将页面的显示区域和操作区域都放置于安全区域之内。
viewport-fitviewport-fit
描述符控制文档是如何填充满屏幕的,其属于CSS Device Adaptation模块。该模块主要应用于移动设备,可让用户定义视图窗口的大小,缩放系数和方向。
它的属性值列表如下所示:
属性值 | 描述 |
---|---|
auto | 默认值,此值不影响初始布局视口,并且整个网页都是可见的。 |
contain | 视图端口按比例缩放,以适合显示内嵌的最大矩形 |
cover | 视图端口被缩放以填充设备显示 |
取值contain
与取值cover
时的对比如下所示:
其设置方式有两种:
1.最常用的方式,通过meta
标签声明
<meta name="viewport" content="viewport-fit=cover">
2.通过@viewport
规则声明
@viewport {
viewport-fit: cover;
}
因为并不是所有的设备显示都是矩形的,在cover
模式下很有可能会发生内容裁剪,如下图所示:
为了页面不被裁剪,防止重要内容出现在可视区域之外,我们应该使用safe area inset
变量。
safe area inset
变量属于CSS环境变量的一种,最初由iOS的safari浏览器提供,用于允许开发人员将其内容放置在视口的安全区域中,safe-area-inset-*
值可用于确保内容即使在非矩形的视区中也可以完全显示。
safe-area-inset-*
由四个定义了视口边缘内矩形的top
, right
, bottom
和left
的环境变量组成,这样可以安全地放入内容,而不会有被非矩形的显示切断的风险。对于矩形视口,例如普通的笔记本电脑显示器,其值等于零。对于非矩形显示器(如圆形表盘,iPhone X屏幕),在用户代理设置的四个值形成的矩形内,所有内容均可见。
iphone X 的safe area inset
值如下图所示:
最初由iOS浏览器提供,用于设定安全区域与边界的距离,其会将用户代理定义的环境变量值插入CSS中。
其语法格式为:
constant( <custom-ident> , <declaration-value>? )
env( <custom-ident> , <declaration-value>? )
第二个参数是可选参数,是用于在环境变量不可用时设置的备用值。
示例用法如下所示:
body {
padding:
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom, 34px)
env(safe-area-inset-left);
}
注:constant()
是用在iOS11.2之前版本中的,env()
是用在iOS11.2及之后版本中的。为了向后兼容,env()
和constant()
需要同时存在,而且顺序为constant()
在前,env()
在后,如下所示:
div {
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
适配步骤
设置viweport-fit属性
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
只有设置了viewport-fit=cover
,才能使用safe area inset
变量。
将文档放置在安全区域内
html {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
将html整个内容限定在安全区域,可保证内容完全显示而不会被小黑条和齐刘海等遮挡和裁剪
fixed 元素的适配
为元素添加一个底部的padding
或者margin
即可。
.fixed {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
关于我
如果觉得本文还不错,希望大家分享、点赞,本公众号前端快爆会定期为您推送最新技术文章,全都是硬菜干货~~
本文到此结束,感谢您的阅读,我们下篇文章见。
关注前端快爆
获取更多精彩
前端快爆
点下"在看",你最好看