iPhone X 适配 手Q H5页面通用解决方案

　　去自腾讯 ISUX 交际用户体验设想中间设想师关于 iPhone X适配 H5页里的处理计划。

　　今朝的 H5 页里能够分为通栏页里战非通栏页里两种，每种页里皆能够有底部操纵栏，详细以下：

　　通栏页里 顶部通栏

　　某些营业的一级页里大都利用了顶部通栏 banner 的结果，因为 iPhone X 正在形态栏删减了24px的下度，关于如今通栏 banner 标准的内容地区会有遮挡状况。

　　处理计划：关于通栏页里正在页里顶部删减一层下度44px的乌色适配层，全部页里往下挪44px。

　　那种做法固然没有契合苹果请求的设想标准，但因为短工夫内更新局部 banner 的本钱太下，能够先那样简朴处置，后绝再劣化 banner 的设想展示。

　　底部 Tab 栏 / 操纵栏

　　有些页里利用了底部 Tab 栏 / 操纵栏，因为 iPhone X 来失落了底部 Home 键，与而代之是34px下度的 Home Indicator ，关于今朝的底部 Tab 栏 / 操纵栏会形成必然的障碍。

　　处理计划：正在页里底部删减一层下度34px的适配层，将操纵栏上移34px，色彩能够自界说。

　　非通栏页里 底部 Tab 栏 / 操纵栏

　　本果同上，正在底部有34px下度的 Home Indicator ，关于今朝的底部 Tab 栏 / 操纵栏会形成必然的障碍操纵。

　　处理计划：正在页里底部删减一层下度34px的色彩块，将操纵栏上移34px，色彩能够自界说。

　　闭于宁静地区

　　那里能够有人会有疑问，为何非通栏下的页里内容是通到底部的，而按钮倒是正在宁静地区上圆呢?

　　那个成绩触及到宁静地区，iOS11 战先前版本的差别的地方正在于，webview 比力正视宁静地区了。那意味着，假如给页里元素设置 top: 0, 它会衬着正在屏幕顶部的44px之下，也便是形态栏上面。假如给页里元素设置 bottom: 0, 它会衬着正在屏幕底部的34px之上，也便是底部宁静地区上里。

　　为理解决那个为难的状况，苹果公司给我们供给了一个设置 viewport 的 meta 标签的处理计划。

　　viewport 能够设置的选项便是 viewport-fit, 它有三个可选值：

　　contain: The viewport should fully contain the web content. 可视窗心完整包罗网页内容

　　cover: The web content should fully cover the viewport. 网页内容完整笼盖可视窗心

　　auto: The default value, 同contain的做用

　　经由过程给页里设置viewport-fit=cover，能够将页里的规划地区延长到页里顶部战底部。

　　关于通栏页里，设置了viewport-fit的属性，发明会没有死效，颠末跟同事检察脚 Q 源码后发明，末端关于 WebView 通栏的状况设置了UIScrollViewContentInsetAdjustmentNever属性，来除高低宁静地区的边距，使得宁静地区的高低边距生效了。

　　别的提一面，颠末 2 个版本的 webview 测试，发明 WKWebView 正在衬着页里的时分，底部按钮正在地位表示上纷歧致，能够是一个借已处理的 bug：

　　利用 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 了~

　　更多详细手艺真现能够检察那里：https://ayogo.com/blog/ios11-viewport/

　　做者：腾讯ISUX

　　滥觞：https://zhuanlan.zhihu.com/p/30840440