前言
目前，很多APP設(shè)計師小伙伴已經(jīng)開始轉(zhuǎn)向H5前端開發(fā)啦，但是解決所有iPhone和安卓機(jī)型的適配問題是我們的重中之重。無論是設(shè)計APP還是寫前端H5.都是要考慮移動端的兼容性。
由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結(jié)合App客戶端做出相應(yīng)的適配，具體如下：
1、頂部通欄
之前的客戶端一直采用狀態(tài)欄20pt+導(dǎo)航欄44pt的做法。由于iphoneX多了一塊小劉海，因此iphoneX單獨(dú)采用狀態(tài)欄44pt+導(dǎo)航欄44pt，意味著內(nèi)嵌的H5頁面整體下移24pt。
2、底部操作欄
由于iphoneX是全面屏，頁面最底部會被彎曲的拐角截掉一部分，特別是有底部固定懸浮的tab條會嚴(yán)重受到影響。這時候需要底部留出一塊空白安全區(qū)域，頁面內(nèi)容最終的底線應(yīng)在手機(jī)拐角處。該安全區(qū)域的高度為34pt。
3、適配方法
終上所述，結(jié)合iphoneX目前特有的手機(jī)參數(shù)我們可以采用的適配方法為：
（1）meta標(biāo)簽
ios11為了適配iphoneX對現(xiàn)有的viewport meta標(biāo)簽新增一個特性：viewport-fit，如果客戶端沒有做全屏適配，那么頁面想要全屏覆蓋，則可使用該特性：
<meta name="viewport" content="width=device-width,viewport-fit=cover">
（2）媒體查詢
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ú)特的型號參數(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）客戶端協(xié)議
也可以根據(jù)客戶端協(xié)議請求客戶端查詢是否是iphoneX，以此來保持和客戶端一致。
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ū)域高度
以上參數(shù)均以標(biāo)準(zhǔn)的1pt=1px進(jìn)行計算，如果H5頁面采用縮放的rem方式，那么1pt = 1px * 3（iphoneX分辨率）
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
