网页缩放后元素位置_网页适配iPhone X：viewportfit与env()的使用

前言

iPhone X/11系列机型取消了传统的物理按键(Home键)，取而代之的是底部小黑条(Home Indicator)。并且，屏幕显示区域也不再是方方正正的矩形，而是带有圆角的不规则图形。iPhone X 视图窗口如下图蓝色区域所示：

iPhone X 视图区域示意图

这一变动使得在网页开发中，需重新考虑页面视图区域以及底部与小黑条的适配，尤其是吸底导航、吸底操作区等相对页面fixed的元素。

为了正确的进行适配，我们需要了解几个新的概念和属性。

安全区域

iPhone X 正面屏幕部分包含了安全区域(Safe Area)、齐刘海(Sensor Housing)、底部小黑条(Home Indicator)。

安全区域指的是一个内容显示区域，处于其中的内容不会受到屏幕圆角、齐刘海和底部小黑条的影响，从而不会发生遮挡、裁剪等情况。安全区域如下图蓝色区域所示：

iPhone X安全区域示意图

因此，我们应当将页面的显示区域和操作区域都放置于安全区域之内。

viewport-fit

viewport-fit描述符控制文档是如何填充满屏幕的，其属于CSS Device Adaptation模块。该模块主要应用于移动设备，可让用户定义视图窗口的大小，缩放系数和方向。

它的属性值列表如下所示：

属性值	描述
auto	默认值，此值不影响初始布局视口，并且整个网页都是可见的。
contain	视图端口按比例缩放，以适合显示内嵌的最大矩形
cover	视图端口被缩放以填充设备显示

取值contain与取值cover时的对比如下所示：

viewport-fit:contain 示意图

viewport-fit:cover 示意图

其设置方式有两种：

1.最常用的方式，通过meta标签声明

<meta name="viewport" content="viewport-fit=cover">

2.通过@viewport规则声明

@viewport {
  viewport-fit: cover;
}

因为并不是所有的设备显示都是矩形的，在cover模式下很有可能会发生内容裁剪，如下图所示：

cover模式裁剪示意图

为了页面不被裁剪，防止重要内容出现在可视区域之外，我们应该使用safe area inset变量。

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值如下图所示：

safe area inset 示意图

env() 和 constant()

最初由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);
}

关于我

如果觉得本文还不错，希望大家分享、点赞，本公众号前端快爆会定期为您推送最新技术文章，全都是硬菜干货~~

本文到此结束，感谢您的阅读，我们下篇文章见。

关注前端快爆

获取更多精彩

前端快爆

点下"在看"，你最好看