发布时间：2024-5-4 分类： 行业动态
一样简单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 {
保证金底部:常数（安全区域插入底部）;
}
}
