資訊專欄INFORMATION COLUMN
tips
iphone6設備寬高為375×667，屏幕分辨率為750×1334，故其設備像素比（dpr）為2。iphoneX的設備寬高375*812，屏幕分辨率為1125x2436，故dpr=3
適配iphoneX目前了解的有3中方法，前兩種方法是先判斷機型
判斷iphoneX機型-1
通過判斷navigator.userAgent中的字符串iphone和iphoneX的設備寬和高
const isIphoneX = () => {
return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}
2.判斷iphoneX機型-2
通過媒體查詢，判斷設備寬高和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函數constant()，以及一組四個預定義的常量：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);
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52254.html
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結合客戶端做出相應的適配，具體如下頂部通欄之前的客戶端一直采用狀態欄導航欄的做法。這時候需要底部留出一塊空白安全區域，頁面內容最終的底線應在手機拐角處。該安全區域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結合App客戶端做出相應的適配，具體如下： 1、頂部通欄 之前的客戶...
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結合客戶端做出相應的適配，具體如下頂部通欄之前的客戶端一直采用狀態欄導航欄的做法。這時候需要底部留出一塊空白安全區域，頁面內容最終的底線應在手機拐角處。該安全區域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結合App客戶端做出相應的適配，具體如下： 1、頂部通欄 之前的客戶...
摘要：由于做了全面屏并且還保留一塊小劉海，因此很多以前的移動端頁面需要結合客戶端做出相應的適配，具體如下頂部通欄之前的客戶端一直采用狀態欄導航欄的做法。這時候需要底部留出一塊空白安全區域，頁面內容最終的底線應在手機拐角處。該安全區域的高度為。 由于iphoneX做了全面屏并且還保留一塊小劉海，因此很多以前的移動端H5頁面需要結合App客戶端做出相應的適配，具體如下： 1、頂部通欄 之前的客戶...
閱讀 1018·2021-11-22 13:52
閱讀 932·2019-08-30 15:44
閱讀 577·2019-08-30 15:43
閱讀 2430·2019-08-30 12:52
閱讀 3480·2019-08-29 16:16
閱讀 643·2019-08-29 13:05
閱讀 2948·2019-08-26 18:36
閱讀 1998·2019-08-26 13:46
