兼容IphoneX
兼容IphoneX的显示,一般有两种方法,一种通过css的media来做兼容,一种是通过js来做兼容。
一、我们先讲CSS的方法,我们要做两步即可:
1. 全屏覆盖,html使用
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
2.通过对底部上移或者顶部下移进行处理
1 | 注:如果想下面constant env 属性有效果,请务必添加上面meta 标签才能实现。 |
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ body{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .iphonex-pt{ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } .iphonex-pb{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .iphonex-mt{ margin-top: constant(safe-area-inset-top); margin-top: env(safe-area-inset-top); } .iphonex-mb{ margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); } .iphonex-pl{ padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); } .iphonex-pr{ padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); } .iphonex-ml{ margin-left: constant(safe-area-inset-left); margin-left: env(safe-area-inset-left); } .iphonex-mr{ margin-right: constant(safe-area-inset-right); margin-right: env(safe-area-inset-right); } .iphonex-bd-top-bg{ border-top: 88px solid transparent; } .iphonex-bd-top{ border-top: 44px solid transparent; } .iphonex-bd-bottom{ border-bottom: 34px solid transparent; }
}
二、通过js来对IphoneX进行兼容
通过判断设配的宽度高度还有设备的像素是否是IphoneX
if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ $(".phonex-pb").css("padding-bottom","34px"); }
对于constant(safe-area-inset-bottom) 这样的属性完全可以不用写在media 媒体查询里面,上面只是做了公共样式处理,safe-area-inset-bottom 意义其实相当于 底部34px。类似padding-bottom:34px;考虑其他兼容问题,多做了一个透明border 处理方法,仅仅是一种解决方式而已,其实都能实现。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步