js 原生获取判断苹果 IPhoneX 、IPhoneXS Max、IPhone XR机型

JavaScript015

js 原生获取判断苹果 IPhoneX 、IPhoneXS Max、IPhone XR机型,第1张

直接干货

```

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手机,至于安卓手机类型比较多,就要复杂很多啦,大家知道的可以相互分享啊。