iphone机型判断及兼容

判断iponeX

function getMobileSystem() {
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android系统
    var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios系统
    var iphoneX = /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
    // 返回1是android系统
    if (isAndroid) {
        return 1;
    }
    // 返回2是ios系统
    if (isiOS && !iphoneX) {
        return 2;
    }
    // 返回3是iphoneX
    if (iphoneX) {
        return 3;
    }
    return 0;
}
//getMobileSystem() 返回“1”是安卓手机；返回“2||3”是ios系统；返回“3”是iphoneX；返回“0”是其他系统。

同理判断其他iphone机型

// iPhone X、iPhone XS
var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
// iPhone XS Max
var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
// iPhone XR
var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896

兼容iphoneX样式问题

js：

 // 兼容iponeX样式问题
        var oMeta = document.createElement('meta');
        oMeta.charset = 'utf-8';
        oMeta.name = 'viewport';
        oMeta.content = 'width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';
        document.getElementsByTagName('head')[0].appendChild(oMeta);

样式：

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}

 参考地址：http://menvscode.com/detail/5bf3a9f15d9468465b1d1288/

https://www.bbsmax.com/A/QV5ZGkk7dy/

https://www.cnblogs.com/yanze/p/9409401.html

https://blog.csdn.net/m0_37805167/article/details/91451703

https://blog.csdn.net/bangxionger9224/article/details/101768452