来自腾讯官方ISUX人际客户体验概念，设计师H5页面中关于iPhoneX适配的解决方案。
今天的H5页面可以分为标题页和非标题页。每个页面都可以有一个底部控制栏。详情如下:
标题页中的顶部标题
有些 *** 作的一级页面，大部分都是利用顶部banner的结果。因为iPhoneX的shapebar被切了24px，banner规范的内容区会被屏蔽。
解决方案:在banner页面中，页面顶部已经删除了44px度数较低的黑色颜色适应层，所有页面下移44px。
虽然没有符合iPhone要求的概念性规范，但是短时间内升级banner的一部分成本太低，可以先简单处理，然后banner的概念绝对不会变质。
底部标签栏/控制栏
在某些页面中，使用底部选项卡栏/控制栏。因为iPhoneX，底部Home键丢失，改用34px下Home指示灯，目前的底部Tab栏/控制栏会造成一定的阻碍。
解决方案:页面底部删除了一个34px的适配层，控制条移动了34px。颜色可以自己定义。
非标题页底部的选项卡栏/控制栏
如果这个和上面一样的话，底部已经有一个34px的Home指示器，当前的底部Tab栏/控制栏会产生一定的遮挡控制。
解决方法:页面底部删除了一层度数较低的34px的色块，控制栏移动了34px。颜色可以自己定义。
关在一个安静的地方
是的，那边有人会问，为什么不在横幅下面的页面里的内容都通向底部，但是按钮已经很安静很圆了？
哪个考试成绩触及安静区？iOS11大战前几个版本号有差异的区域已经在了，webview对安静区域的识别更加清晰。这意味着，如果您将top:0设置为页面中的元素，它将在显示的顶部(即形状栏的上方)与44px对齐。如果为页面中的元素设置了bottom:0，它将在已经显示的屏幕底部，即底部的安静区域中，与超过34px的元素对齐。
为了应对任何棘手的情况，美国苹果公司要求我们提供设置viewport的metalogo的解决方案。
viewport可以设置的选项是viewport-fit，它有三个可选值:
包含:视口应该完全包含web内容。您可以在窗口中心包含详细的网页。
覆盖:网页内容应该完全覆盖视窗。网页详情:笼盖窗口中心。
自动:默认值，角色为包含
在页面中设置viewport-fit=cover的整个过程之后，页面中的整体规划区域可以增加到页面的顶部和底部。
在标题页上，设置了适合视窗的特性，这样在创造发明时就不会有死效应。和朋友查了脚Q的源代码后，创建了发明，在WebViewbanner的末尾设置了UIScrollViewContentSetAdjustmentNever特性，去除了平静区域的行高，使得平静区域的行高生效。
另一方面，通过两个版本号的webview检测，当发明WKWebView已经在页面上划线时，底部按钮的影响表示有不同意见，可以是已经解决的bug:
使用网络计划:
根据以上构思方案，应急处理如下:
调整页面中的视口调整功能。
一个iphonex.css已经连接到H5页面，从iphonex相遇的页面删除匹配的适配层。
已经从H5页面上的匹配dom结构中减去了适当的类名。
iPhoneX.css
如上所述，那种方式的测试结果是需要调整的页面非常多，而且给页面带来了额外的类名，对于今天的样式清理也是有一定工作量的。
其他的，使用样式删除页面顶部的适配层，当你向下推页面时，黑色的适配层会随之移动:
然而，用网络的方式来解决考试成绩不理想的问题是非常合理的。能不能在整个过程的最后通过全程的方式为webview删除适配层，然后求解哪个考试结果？
使用尾部计划:
和页末的老朋友一样，全流程全方式之后肯定是可以切适配层的，这在死亡世界的开头就已经有了，所以那一页没有样式应急处理的要求。
通过详细删除整个连接过程中的主要参数来终止自适应:
主要参数名称:_wvx领会iPhoneX适配到
主要参数名称:_wvxTclr掌握顶部适配器层的颜色
主要参数名称:_wvxBclr掌握底部适配器层的颜色
在关于顶部banner的页面中，通过全程减去URL主要参数，删除了顶部黑色适配层。
关于底层控制条(包括banner和非banner)，全程减去URL的主要参数来删除底层适配层和设置颜色。
(那边wvx=10就是2战和82特征数据的区别)
然后不用写代码，只需要在页面中删除和适配连接的主要参数，就可以完美适配iPhoneX了~
很多详细技能可以在那边查:https://ayogo.com/blog/ios11-viewport/.
完成:腾讯官方ISUX
产地:https://zhuanlan.zhihu.com/p/30840440
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）