```
iphoneX()
function iphoneX(){
var userAgent = navigator.userAgent var ios = !!userAgent.match(/\(i[^]+( U)? CPU.+Mac OS X/) //ios终端 if (ios){
if ((screen.height == 812 &&screen.width == 375) || (screen.height == 896 &&screen.width == 414)) {
// 这里是你的判断后的样式
}
}
}
// iPhone X、iPhone XS、iPhone XR
let isIPhoneX =
/iphone/gi.test(window.navigator.userAgent) &&
window.devicePixelRatio &&
window.devicePixelRatio === 3 &&
window.screen.width === 375 &&
window.screen.height === 812
// iPhone XS Max
let isIPhoneXSMax =
/iphone/gi.test(window.navigator.userAgent) &&
window.devicePixelRatio &&
window.devicePixelRatio === 3 &&
window.screen.width === 414 &&
window.screen.height === 896
// iPhone XR
let isIPhoneXR =
/iphone/gi.test(window.navigator.userAgent) &&
window.devicePixelRatio &&
window.devicePixelRatio === 2 &&
window.screen.width === 414 &&
window.screen.height === 896
```
在H5页面的开发中,肯定会遇到获取手机的型号等需求,使用js的navigator对象,能获取到有关浏览器的相关信息,但想获取手机使用的系统等更多内容还是有局限性的。
在网上搜到一个好用的获取手机型号和系统的插件 mobile-detect.js
2.引用mobile-detect.js
实例化一个MobileDetect
在浏览器中使用三星模拟器测试可以打印安卓型号 5.0:
使用iphone打印iphone型号ios11:
这个还是不能准确定位使用的是什么型号的手机,但可以通过返回的信息判断使用的是安卓还是苹果的,比如苹果结合获取设备屏幕大小和io系统的型号就可以判断出使用的是什么iphone手机,至于安卓手机类型比较多,就要复杂很多啦,大家知道的可以相互分享啊。