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 ）
     // return 1 is android system 
    if （isAndroid）{
         return 1 ; 
    } 
    // return 2 is ios system 
    if（isiOS &&！IphoneX）{
         return 2 ; 
    }
    // return 3 is iphoneX 
    if （iphoneX）{
         return 3 ; 
    } 
    return 0 ; 
} 
// getMobileSystem（）は "1"を返し、Android携帯電話を返す; "2 || 3"はiOSシステムである; return "3" is 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。高さ=== 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