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);
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52254.html
摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。 由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏 之前的客户...
摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。 由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏 之前的客户...
摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。 由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏 之前的客户...
阅读 963·2021-11-22 13:52
阅读 901·2019-08-30 15:44
阅读 554·2019-08-30 15:43
阅读 2403·2019-08-30 12:52
阅读 3453·2019-08-29 16:16
阅读 613·2019-08-29 13:05
阅读 2925·2019-08-26 18:36
阅读 1913·2019-08-26 13:46
