微信H5兼容iPhoneX

问题抛出，主要是因为iphoneX屏幕的齐刘海和底部滑条带来的一些操作问题。

---

 

解决方案一（不针对微信H5或者手QH5）

1.iPhoneX的适配，在iOS 11中采用了viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto。

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

关于 viewport-fit

1.viewport-fit 有三个可选值：

• contain: 最初的布局视窗和视觉布局视窗被设置为最大的矩形。在Viewport之外的UA绘制的是未定义的，它可能是画布的背景色，或者UA认为合适的其他东西；
• cover:  初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形；
• auto: 这个值不影响初始布局视窗，整个Web页面是可视的。在视窗之外的UA绘制的是未定义的，它可能是画布的背景色，或者是UA认为合适的其他东西；

 

2.在iOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：

safe-area-inset-left, 

safe-area-inset-right, 

safe-area-inset-top，

safe-area-inset-bottom。

当使用viewport-fit等于auto或者contain的时候，4个预定于的常量设置是不生效的。

 

3.通过给页面设置viewport-fit=cover，可以将页面的布局区域延伸到页面顶部和底部。

然后就可以自定义设置你喜欢的内边距大小，或者使用IOS 11中的预设常量。

body{
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); }

或者

body{
    padding-top: 88px;
    padding-left: 0px; padding-right: 0px; padding-bottom: 34px; }

选择自己喜欢的。

---

 

解决方案二（针对微信H5或者手QH5）

因为微信H5或者手QH5即使设置了viewport-fit=cover，也不生效，具体原因https://cloud.tencent.com/developer/article/1006338可以查看这个地址。

所以解决思路是通过css的媒体查询，针对iphoneX做单独样式处理，如下

写一个单独的样式文件针对iphonex的。

@media only screen and (device-width: 375px) and (device-height: 812px) and 
(-webkit-device-pixel-ratio: 3) {
      //这里写 需要针对iPhonex单独重写的样式，比如顶部或者底部菜单栏，具体的看自己的需求写就好了
    //比如我所有样式中需要针对iphonex重写的如下
    .bottom-height{
        height: 90px !important; } .bottom-menu { padding-bottom: 20px; } .home-footer-bar{ height: 70px !important; } .newyear-doorbtn{ bottom:80px !important; } .paddingb60{ padding-bottom: 80px !important; } }

如图效果：

 

 

---

参考资料：

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

　关于H5在iphoneX中的适配

 

来源：站长百科