一样简单iPhoneX取消了物理按钮并将其更改为底部的小黑条。这种变化导致网页具有更尴尬的屏幕适应问题。对于网页，顶级（刘海）改编问题浏览器已经处理完毕，所以我们只需要注意底部和小黑条的适应问题（即常见的底部导航，回到顶部等）。固定在元素的底部）。

作者：匿名来源：Aotu.io | 2017-11-28 15: 29 mobile favorites分享CTO训练营结束| 12月3日至5日，深圳，是时候成为一名优秀的技术经理了

iPhoneX取消了物理按钮并将其更改为底部的小黑条。这种变化导致网页具有更尴尬的屏幕适应问题。对于网页，顶级（刘海）改编问题浏览器已经处理完毕，所以我们只需要注意底部和小黑条的适应问题（即常见的底部导航，回到顶部等）。固定在元素的底部）。

作者咨询了一些官方文件，结合实际项目的一些处理经验，编制了一个简单的适应计划与大家分享，希望对大家有所帮助，以下是处理前后的效果：

在适应之前需要了解的几个新知识

安全区域

安全区域是指一系列可见窗口。安全区域中的内容不受角落，传感器外壳和家庭指示灯的影响。蓝色区域如下：

换句话说，我们必须适应，我们必须确保页面可见，可操作区域在安全区域。

有关更多详细信息，请参阅文档：人机界面指南 - iPhoneX

视口配合

iOS11中的新功能，为了使iPhoneX适应现有视口元标记的扩展，要在可见窗口中设置网页的布局，可以设置三个值：

包含:可视窗口完全包含网页内容（左）

封面：网页内容完全覆盖可见窗口（右）

自动：默认值，与包含

注意：没有添加扩展名的网页的默认性能是viewport-fit=contains。要适应iPhoneX，您必须设置viewport-fit=cover，这是适应的关键步骤。

有关更详细的说明，请参阅文档：viewport-fit-descriptor

常数功能

iOS11中的新功能，Webkit的CSS功能，用于设置安全区域和边界之间的距离。有四个预定义变量：

Safe-area-inset-left：距安全区左边缘的距离

Safe-area-inset-right：从安全区域到右边缘的距离

安全区域嵌入式顶部：距安全区域顶部的距离

安全区域插入底部：距安全区域底部的距离

这里我们只需要注意safe-area-inset-bottom变量，因为它对应于小黑条的高度（水平和垂直屏幕时的值不同）。

注意：当viewport-fit=contains时，常量函数不起作用，必须与viewport-fit=cover一起使用。对于不支持常量的浏览器，浏览器将忽略它。

官方文档提到env函数即将替换常量函数，并且作者尚未对其进行测试。

有关更多详细信息，请参阅文档：为iPhone X设计代购源码网站

如何适应

在了解了上述知识点后，我们的适应思路非常清晰。

第1步：在可视窗口中设置网页的布局

添加了viweport-fit属性以使页面内容完全覆盖整个窗口：

< metaname='viewport'content='width=device-width，viewport-fit=cover'>

如前所述，只有在设置了viewport-fit=cover时才能使用常量函数。

第2步：页面主体的内容仅限于安全区域

根据实际页面场景选择该步骤。如果未设置该值，则可能存在小黑条遮挡页面的最底部内容的情况。

身体{

填充底部:常量（安全区域插入底部）;

}

第3步：修改固定元素

类型1：完全固定底部元素（底部=0），例如以下两种情况：

您可以通过填充填充来扩展高度：

{

填充底部:常量（安全区域插入底部）;

}

或者通过计算函数calc覆盖原始高度：

{

高度:计算（60px（假设值）+常数（安全区域插入底部））;

}

请注意，此方案要求底部条带必须具有背景颜色，因为背景的延伸部分是跟随外部容器，否则会发生挖空。

另一个选择是添加一个新元素（一个空的颜色块，主要用于小黑条的高度），然后吸收底部元素而不改变高度，只需要调整位置，如下所示：p>

{

保证金底部:常数（安全区域插入底部）;

}

空颜色块：

{

位置:已修复;

底部: 0;

宽度: 100％;

高度:常数（安全区域插入底部）;

背景色: fff;

}

类型2：固定的非完整底部元素（bottom≠ 0），例如“回到顶部”，“侧面广告”等

就像这样，需要向上调整头寸，这只能通过保证金保证金来处理：

{

保证金底部:常数（安全区域插入底部）;

}

或者，您可以通过计算函数calc：

{

底部:计算（50px（假定值）+常数（安全区域插入底部））;

}

不要忘记使用@supports

写在这里，我们已经了解了两种常见类型的固定元素自适应方案，但不要忘记，一般我们只希望iPhoneX需要新的自适应样式，我们可以用@supports编写样式：

@supports（底部:常量（safe-area-inset-bottom））{

Div {

保证金底部:常数（安全区域插入底部）;

}

}

« NOME：好看的广告是一样的，心脏的营销是最好的。 | 创新研讨会和看着真实网格的涂鸦社区聚集了10万个“大动作”来展示大脑洞 »