[Cordova] 移动App 的 ios11 和 iPhoneX 适配

关键点1:

要有一张适配iPhoneX的启动图（1125*2436），不然后续方法都无效！！！！！！

关键点2:

在viewport meta中添加viewport-fit=cover

有这2步，就能全屏显示了，如果不能就就看下面的文章，那就是WMwebkit和UIwebkit作怪了，看看下面文章有详细介绍（ps：居然还介绍了SenchaTouch的方案，意外！！！）

链接：https://blog.csdn.net/lovelyelfpop/article/details/79460700

关键点3:

如果想呈现完美兼容的效果，那还需要以下2个知识点

1. iPhoneX安全区概念 链接： https://www.w3cplus.com/css/the-notch-and-css.html

Webkit 在 iOS 11 中新增 CSS function：env() 替代 constant()，文档中推荐使用 env()，而 constant() 从 Safari Technology Preview 41 和 iOS 11.2 beta 开始会被废弃。env() 用法如同 var()，在不支持的 env() 的浏览器中，会自动忽略这一样式规则，不影响网页正

2.需要动态判断iPhoneX设备，动态添加样式

if(isIphoneX()){ 

　　var styleElems=document.getElementsByTagName("style"); 

　　if(styleElems.length==0){ 

　　　　var tempStyle=document.createElement("style"); 
　　　　tempStyle.setAttribute("type","text/css"); 
　　　　document.getElementsByTagName("head")[0].appendChild(tempStyle); 
　　} 
　　var styleElem=styleElems[0]; 

　　//增加相关的CSS样式  
　　styleElem.appendChild(document.createTextNode( "body{padding-top: env(safe-area-inset-top);padding-bottom: env(safe-area-inset-bottom)}" ));

}

3. 汇总一些判断iPhoneX的方式：轮思路的重要性！！！！！！！！！！

// 最常用的通过useragent和分辨率判断

function isIphoneX(){

　　return /iphone/i.test(navigator.userAgent) && ( window.screen.width * window.devicePixelRatio === 1125 && window.screen.height * window.devicePixelRatio === 2436

) }

// 还可以用新增的 safe-area-inset-bottom 属性判断
// js方式

function isIphoneX(){

　　if (CSS.supports('padding-left: constant(safe-area-inset-left)')) {
    　　var div = document.createElement('div');
    　　div.style.paddingLeft = 'constant(safe-area-inset-left)';
    　　document.body.appendChild(div);
    　　var calculatedPadding =  parseInt(window.getComputedStyle(div).paddingLeft);
    　　document.body.removeChild(div);
    　　if (calculatedPadding > 0) {
        　　return true;
    　　} 
　　}
　　return false;
}
// css方式

@media (device- 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
    @supports (bottom: constant(safe-area-inset-bottom)) {

　　　　div {
    　　　　margin-bottom: constant(safe-area-inset-bottom);
  　　}

} }

// 再来个更牛的， 通过 JavaScript 获取移动设备的型号

(function () {
    var canvas = document.createElement('canvas'),
        gl = canvas.getContext('experimental-webgl'),
        debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

    console.log(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));
})();