发布时间：2022-3-8 分类： 行业资讯
腾讯的设计师使用King's Glory H5页面盒来帮助您学习如何适应iPhone X.
腾讯ISUX：当前的H5页面可以分为两种类型：标题页面和非端口页面。每个页面可能都有一个底部操作栏，如下所示：
1.标题页
顶栏
某些商家的大多数第一级页面都使用顶部横幅的效果。由于iPhone X在状态栏中添加了24px，因此当前横幅规范的内容区域中存在遮挡。
解决方案：对于标题页，在页面顶部添加一层44px黑色适应层，并将整个页面向下移动44px。
虽然这种方法不符合Apple要求的设计规范，但由于在短时间内更新所有横幅的成本太高，可以像这样简单处理，然后优化横幅的设计。
底部标签栏/操作栏
有些页面使用底部的标签栏/操作栏。由于iPhone X移除了底部的Home按钮并将其替换为34px高度的Home Indicator，因此它可能成为当前底部Tab/Operation栏的障碍。
解决方案：在页面底部添加一层高度为34px的适配层，将操作栏移动到34px，颜色可以自定义。
2.非酒吧页面
底部标签栏/操作栏
出于同样的原因，底部高度为34px的Home Indicator会对当前底部Tab/Operation Bar造成一些障碍。
解决方案：在页面底部添加一层高度为34px的图层，将操作栏移动到34px，颜色可以自定义。
III。关于安全区域
有人可能会有问题，为什么非通行条下的页面内容会显示在底部，而按钮位于安全区域上方？
此问题与安全区有关。 iOS11与之前版本的区别在于webview更加关注安全区域。这意味着如果为页面元素设置顶部: 0，它将在屏幕顶部（位于状态栏下方）呈现低于44px。如果将底部: 0设置为页面元素，它将在屏幕底部的34px上方渲染，该位于底部安全区域之上。
为了解决这种尴尬局面，Apple为我们提供了设置Viewport Meta标签的解决方案。
Viewport可以设置的选项是Viewport— fit，它有三个可选值：
包含：视口应完全包含Web内容。可视窗口完全包含Web内容。
封面：网页内容应完全覆盖视口。 Web内容完全覆盖可见窗口。
自动：默认值，包含角色。
通过将Viewport— fit=cover设置到页面，您可以将页面的布局区域扩展到页面的顶部和底部。
对于标题页，设置Viewport的属性— fit并发现它不会生效。在与同事检查源代码后，发现终端为WebView横幅设置了UIScrollViewContentInsetAdjustmentNever属性，并删除了上下安全区域的边距，使得安全区域的上边距和下边距都失败了。
此外，在两个版本的Webview测试之后，发现当WKWebview呈现页面时，底部按钮的位置不一致，这可能是一个未解决的错误：
使用Web解决方案：
根据上述设计，可以这样处理：
修改页面Viewport— fit属性。
链接H5页面上的iphonex.CSS，为iPhone X访问的页面添加相应的适配层。
将相应的类名添加到H5页面上相应的Dom结构中。
△iPhone X .CSS
如上所述，问题在于有很多页面需要修改，页面还有一个额外的类名，它也有一定的工作量可以用于将来的样式删除。
此外，使用样式将适配层添加到页面顶部。当页面被拉下时，黑色适应层将随之移动：
由于使用Web来解决这个问题并不完美，你可以通过终端向Webview添加适配层来解决这个问题吗？
使用终端计划：
在与终端学生通信之后，确定当通过终端初始化本机接口时可以添加适配层，从而不需要对页面进行样式化。
具体而言，通过向链接添加参数来调整它。:
参数名称：_Wvx控制iPhone X的适应行为。
参数名称：_WvxTclr控制顶部适应层颜色。
参数名称：_WvxBclr控制底部适配层颜色。
对于首页，通过添加URL参数添加顶部黑色适应层。
对于底部操作栏“包含横幅和非端口”，添加URL参数以增加底部适应层并设置颜色。
△其中WVX=10是2和8个特征数之和
这样，您不需要编写一行代码，只需将适配参数添加到页面链接，就可以完美地适应iPhone X.
