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