问题抛出，主要是由于iphoneX屏幕的齐刘海和底部滑条带来的一些操做问题。css
解决方案一（不针对微信H5或者手QH5）html
1.iPhoneX的适配，在iOS 11中采用了viewport-fit的meta标签做为适配方案；viewport-fit的默认值是auto。git
<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 有三个可选值：github
- contain: 最初的布局视窗和视觉布局视窗被设置为最大的矩形。在Viewport以外的UA绘制的是未定义的，它多是画布的背景色，或者UA认为合适的其余东西；
- cover: 初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形；
- auto: 这个值不影响初始布局视窗，整个Web页面是可视的。在视窗以外的UA绘制的是未定义的，它多是画布的背景色，或者是UA认为合适的其余东西；
2.在iOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预约义的常量：web
safe-area-inset-left, 微信
safe-area-inset-right, iphone
safe-area-inset-top，函数
safe-area-inset-bottom。布局
当使用viewport-fit等于auto或者contain的时候，4个预约于的常量设置是不生效的。spa
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; } }
如图效果：
参考资料：