這篇文章主要介紹了iphoneX如何適配客戶(hù)端H5頁(yè)面，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到根河網(wǎng)站設(shè)計(jì)與根河網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋根河地區(qū)。

前言

目前，很多APP設(shè)計(jì)師小伙伴已經(jīng)開(kāi)始轉(zhuǎn)向H5前端開(kāi)發(fā)啦，但是解決所有iPhone和安卓機(jī)型的適配問(wèn)題是我們的重中之重。無(wú)論是設(shè)計(jì)APP還是寫(xiě)前端H5.都是要考慮移動(dòng)端的兼容性。

由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動(dòng)端H5頁(yè)面需要結(jié)合App客戶(hù)端做出相應(yīng)的適配，具體如下：

1、頂部通欄

之前的客戶(hù)端一直采用狀態(tài)欄20pt+導(dǎo)航欄44pt的做法。由于iphoneX多了一塊小劉海，因此iphoneX單獨(dú)采用狀態(tài)欄44pt+導(dǎo)航欄44pt，意味著內(nèi)嵌的H5頁(yè)面整體下移24pt。

2、底部操作欄

由于iphoneX是全面屏，頁(yè)面最底部會(huì)被彎曲的拐角截掉一部分，特別是有底部固定懸浮的tab條會(huì)嚴(yán)重受到影響。這時(shí)候需要底部留出一塊空白安全區(qū)域，頁(yè)面內(nèi)容最終的底線應(yīng)在手機(jī)拐角處。該安全區(qū)域的高度為34pt。

3、適配方法

終上所述，結(jié)合iphoneX目前特有的手機(jī)參數(shù)我們可以采用的適配方法為：

（1）meta標(biāo)簽

ios11為了適配iphoneX對(duì)現(xiàn)有的viewport meta標(biāo)簽新增一個(gè)特性：viewport-fit，如果客戶(hù)端沒(méi)有做全屏適配，那么頁(yè)面想要全屏覆蓋，則可使用該特性：

<meta name="viewport" content="width=device-width,viewport-fit=cover">

（2）媒體查詢(xún)

1、利用constant函數(shù)

只有設(shè)置了viewport-fit=cover才能使用constant函數(shù)

@supports(bottom:constant(safe-area-inset-bottom)) {
    selector{
        padding-bottom:constant(safe-area-inset-bottom); 
        padding-bottom:calc(30px(假設(shè)值) + constant(safe-area-inset-bottom)); //根據(jù)實(shí)際情況選擇適配方法
    }
}

2、利用iphoneX獨(dú)特的型號(hào)參數(shù)

@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）客戶(hù)端協(xié)議

也可以根據(jù)客戶(hù)端協(xié)議請(qǐng)求客戶(hù)端查詢(xún)是否是iphoneX，以此來(lái)保持和客戶(hù)端一致。

4、參數(shù)解釋

以上代碼中的參數(shù)解釋如下：

• safe-area-inset-bottom — ios11新增特性，用于設(shè)定安全區(qū)域與邊界的距離

• 375 — iphoneX設(shè)備的寬度

• 812 — iphoneX設(shè)備的高度

•     3 — iphoneX設(shè)備的分辨率

• 724 — iphoneX設(shè)備的高度(812) - 頂部通欄高度(88)

•   34 — 底部安全區(qū)域高度

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“iphoneX如何適配客戶(hù)端H5頁(yè)面”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

新聞標(biāo)題：iphoneX如何適配客戶(hù)端H5頁(yè)面-創(chuàng)新互聯(lián)
分享鏈接：http://jinyejixie.com/article32/dpphsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站改版、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)