問題拋出，主要是由於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; } }
如圖效果：
參考資料：