資訊專欄INFORMATION COLUMN
tips
iphone6設(shè)備寬高為375×667，屏幕分辨率為750×1334，故其設(shè)備像素比（dpr）為2。iphoneX的設(shè)備寬高375*812，屏幕分辨率為1125x2436，故dpr=3
適配iphoneX目前了解的有3中方法，前兩種方法是先判斷機(jī)型
判斷iphoneX機(jī)型-1
通過判斷navigator.userAgent中的字符串iphone和iphoneX的設(shè)備寬和高
const isIphoneX = () => {
return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}
2.判斷iphoneX機(jī)型-2
通過媒體查詢，判斷設(shè)備寬高和dpr
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) {}
3.通過css3的content
在iOS 11中的WebKit包含了一個新的CSS函數(shù)constant()，以及一組四個預(yù)定義的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom
body {
background: grey;
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);
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52254.html
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結(jié)合客戶端做出相應(yīng)的適配，具體如下頂部通欄之前的客戶端一直采用狀態(tài)欄導(dǎo)航欄的做法。這時候需要底部留出一塊空白安全區(qū)域，頁面內(nèi)容最終的底線應(yīng)在手機(jī)拐角處。該安全區(qū)域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結(jié)合App客戶端做出相應(yīng)的適配，具體如下： 1、頂部通欄 之前的客戶...
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結(jié)合客戶端做出相應(yīng)的適配，具體如下頂部通欄之前的客戶端一直采用狀態(tài)欄導(dǎo)航欄的做法。這時候需要底部留出一塊空白安全區(qū)域，頁面內(nèi)容最終的底線應(yīng)在手機(jī)拐角處。該安全區(qū)域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結(jié)合App客戶端做出相應(yīng)的適配，具體如下： 1、頂部通欄 之前的客戶...
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結(jié)合客戶端做出相應(yīng)的適配，具體如下頂部通欄之前的客戶端一直采用狀態(tài)欄導(dǎo)航欄的做法。這時候需要底部留出一塊空白安全區(qū)域，頁面內(nèi)容最終的底線應(yīng)在手機(jī)拐角處。該安全區(qū)域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結(jié)合App客戶端做出相應(yīng)的適配，具體如下： 1、頂部通欄 之前的客戶...
閱讀 1027·2021-11-22 13:52
閱讀 941·2019-08-30 15:44
閱讀 582·2019-08-30 15:43
閱讀 2437·2019-08-30 12:52
閱讀 3486·2019-08-29 16:16
閱讀 648·2019-08-29 13:05
閱讀 2953·2019-08-26 18:36
閱讀 2007·2019-08-26 13:46
