juicio y compatibilidad del modelo de iPhone

Juzgar iponeX

función getMobileSystem () {
     var u = navigator.userAgent;
     var isAndroid = u.indexOf ('Android')> -1 || u.indexOf ('Adr')> -1; // sistema android 
    var isiOS = !! u .match (/ \ (i [^;] +; (U;)? CPU. + Mac OS X /); // ios system 
    var iphoneX = /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375 )
     // return 1 es el sistema Android 
    if (isAndroid) {
         return 1 ; 
    } 
    // return 2 es el sistema ios 
    if (isiOS &&! IphoneX) {
         return 2 ; 
    }
    // Return 3 es iphoneX 
    if (iphoneX) {
         return 3 ; 
    } 
    return 0 ; 
} 
// getMobileSystem () devuelve "1" es el teléfono Android; devuelve "2 || 3" es el sistema ios; devuelve "3" es iphoneX; Devuelve "0" para otros sistemas.

Del mismo modo, juzgue otros modelos de iPhone

// iPhone X 、 iPhone XS 
var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen. altura === 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

Problema de estilo compatible con iphoneX

js ：

 // 兼容 iponeX 样式 问题
        var oMeta = document.createElement ('meta' ); 
        oMeta.charset = 'utf-8' ; 
        oMeta.name = 'viewport' ; 
        oMeta.content = 'ancho = ancho del dispositivo, escala inicial = 1.0, escala mínima = 1.0, escala máxima = 1.0, escalable por el usuario = no, ajuste de ventana = cubierta' ; 
        document.getElementsByTagName ( 'cabeza') [0] .appendChild (oMeta);

Estilo:

body { 
    padding-top : constant (safe-area-inset-top) ;    // La altura de la barra de navegación + barra de estado 88px             
    padding-left : constante (safe-area-inset-left) ;    // Si la pantalla no es vertical 0                 
    padding-right : constant (safe-area-inset-right) ; // Si no hay pantalla vertical, 0                 
    padding-bottom : constant (safe-area-inset-bottom) ; // La altura del arco inferior es 34px       
 }

 Dirección de referencia: 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