方法一:JS判断
function isIphoneX(){
if(/iphone/gi.test(window.navigator.userAgent)){
/* iPhone X、iPhone XS */
var x=(window.screen.width === 375 && window.screen.height === 812);
/* iPhone XS Max */
var xsMax=(window.screen.width === 414 && window.screen.height === 896);
/* iPhone XR */
var xR=(window.screen.width === 414 && window.screen.height === 896);
if(x || xsMax || xR){
return true;
}else{
return false;
}
}else{
return false
}
}
/* 函数使用 */
if(isIphoneX()){
document.querySelector( selector ).style.paddingBottom="34px";
}
方法二:CSS媒体查询
@media screen and (width: 375px) and (height: 812px){
.button {
padding-bottom: 34px;
}
}
// 更多 iPhone X 系列其它尺寸请参照JS的尺寸写
小编推荐方法二,能在CSS中解决的事情,不要交给JS去处理。可能写的会更多一点,但不会存在渲染时元素突然上跳的感觉。
虽然实现了底部home键的兼容,但是在safari浏览器中,浏览器底部的操作栏会有显示和隐藏的切换,如何动态兼容呢?
请阅读小编的原创文章《javascript iphoneX的safari浏览器操作栏隐藏时兼容底部home键》
文章地址:https://blog.csdn.net/u013350495/article/details/99228848
作者:黄河爱浪 QQ:1846492969,邮箱:[email protected]
公众号:
web-7258
,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号