iphoneX如何適配客戶端H5頁面

這篇文章主要介紹了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 — 底部安全區域高度

感謝你能夠認真閱讀完這篇文章，希望小編分享的“iphoneX如何適配客戶端H5頁面”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!