這篇文章主要為大家介紹了關於iphoneX 適配客戶端H5頁面的相關資料，文中介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面一起學習學習吧。
前言
目前，許多APP設計師小夥伴已經開始轉向H5前端開發啦，但解決所有iPhone和安卓機型的適配問題是我們的首要任務。無論是設計APP還是寫前端H5.都是要考慮行動端的相容性。
由於iphoneX做了全面螢幕並且還保留一塊小瀏海，因此許多先前的行動端H5頁面需要結合App客戶端做出對應的適配，具體如下：
#1、頂部通列
之前的客戶端一直採用狀態列20pt 導覽列44pt的做法。由於iphoneX多了一塊小瀏海，因此iphoneX單獨採用狀態列44pt 導覽列44pt，意味著內嵌的H5頁面整體下移24pt。
2、底部操作欄
由於iphoneX是全面屏，頁面最底部會被彎曲的角落截掉一部分，特別是有底部固定懸浮的tab條會嚴重受到影響。這時候需要底部留出一塊空白安全區域，頁面內容最終的底線應在手機轉角處。此安全區域的高度為34pt。
3、適配方法
終上所述，結合iphoneX目前特有的手機參數我們可以採用的適配方法為：
（1）meta標籤
ios11為了適配iphoneX對現有的viewport meta標籤新增一個特性：viewport-fit，如果客戶端沒有做全螢幕適配，那麼頁面想要全螢幕覆蓋，則可使用該特性：
<meta name="viewport" content="width=device-width,viewport-fit=cover">
（2）媒體查詢
1、利用constant函數
只有設定了viewport-fit=cover才能使用constant函數
@supports(bottom:constant(safe-area-inset-bottom)) {
selector{
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
}
}2、利用iphoneX獨特的型號參數
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
#buy {
padding-bottom:34px;
}
}（3）js判斷（以下採用Jquery）
if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
#buy {
padding-bottom:34px;
}
}（4）客戶端協定
也可以根據客戶端協定請求客戶端查詢是否為iphoneX，以此來維持和客戶端一致。
4、參數解釋
以上程式碼中的參數解釋如下：
#safe-area-inset-bottom — ios11新增特性，用於設定安全區域與邊界的距離
375 — iphoneX裝置的寬度
812 — iphoneX裝置的高度
# 3 — iphoneX裝置的解析度
724 — iphoneX裝置的高度(812) - 頂部通欄高度(88)
# 34 — 底部安全區域高度
以上參數皆以標準的1pt=1px計算，如果H5頁採用縮放的rem方式，那麼1pt = 1px * 3（ iphoneX解析度）
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關建議：
以上是關於iphoneX 適配客戶端H5頁面的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
