JavaScript 判断iPhone X Series机型的方法
写在前面
如果有更优雅的方式，一定要告诉我！
现状
iPhoneX底部是需要预留34px的安全距离，需要在代码中进行兼容。
现状对于iPhoneX的判断基本是这样的：
//h5 exportconstisIphonex=()=>/iphone/gi.test(navigator.userAgent)&&window.screen&&(window.screen.height===812&&window.screen.width===375);
这在之前是没问题的，新的iPhoneXSeries设备发布之后，这个就会兼容就有问题。
iPhoneXSeries参数
width===375&&height===812只能识别出iPhoneX和iPhoneXS，对于iPhoneXSMax和iPhoneXR就无能为力了。
解决方法
对每个机型进行判断
constisIphonex=()=>{
//XXS,XSMax,XR
constxSeriesConfig=[
{
devicePixelRatio:3,
width:375,
height:812,
},
{
devicePixelRatio:3,
width:414,
height:896,
},
{
devicePixelRatio:2,
width:414,
height:896,
},
];
//h5
if(typeofwindow!=='undefined'&&window){
constisIOS=/iphone/gi.test(window.navigator.userAgent);
if(!isIOS)returnfalse;
const{devicePixelRatio,screen}=window;
const{width,height}=screen;
returnxSeriesConfig.some(item=>item.devicePixelRatio===devicePixelRatio&&item.width===width&&item.height===height);
}
returnfalse;
}
统一处理方法
因为现在iPhone在iPhoneX之后的机型都需要适配，所以可以对X以后的机型统一处理，我们可以认为这系列手机的特征是ios+长脸。
在H5上可以简单处理。
constisIphonex=()=>{
if(typeofwindow!=='undefined'&&window){
return/iphone/gi.test(window.navigator.userAgent)&&window.screen.height>=812;
}
returnfalse;
};
媒体查询
@mediaonlyscreenand(device-width:375px)and(device-height:812px)and(-webkit-device-pixel-ratio:3){
}
@mediaonlyscreenand(device-width:414px)and(device-height:896px)and(-webkit-device-pixel-ratio:3){
}
@mediaonlyscreenand(device-width:414px)and(device-height:896px)and(-webkit-device-pixel-ratio:2){
}
媒体查询无法识别是不是iOS，还得加一层JS判断，否则可能会误判一些安卓机。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。