关于iphonX横屏显示兼容问题

作者: 只会前端的切图仔 | 来源:发表于2018-05-23 17:21 被阅读170次

关于iphonX横屏显示兼容问题
IOS app 开启横屏旋转方法
移动端开发-禁止横屏
iOS开发设置指定页面横屏显示，其余页面竖屏显示
基础知识3
MBProgressHUD横屏适配
横屏显示界面
SVProgressHUD横屏显示
35.让指定页面横屏
android EditText横屏显示问题

1.浏览器默认两边有加44像素留白(viewport-fit=container),如图显示
2.微信内嵌无论有没有设置viewport-fit=cover，均为全屏显示
3.ISO11.2之前的版本游戏内嵌时如果默认使用viewport-fit=containe设置，会导致左边留空，右边超出屏幕并出现横向滚动条的情况，所以要使用viewport-fit=cover设置，以全屏显示，
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui,viewport-fit=cover">
同时使用全屏设置需要注意刘海遮挡的问题。
若需要左右留空可以使用safa-area-inset-***样式来将左右和上下的安全区域留空（若遮挡并不影响页面显示可不用设置）:

<html>
<div class="wrapper">
    <div class="main"></div>
<div>
</html>

<style>
.wrapper{
    width:100%;
    height:100%;
    box-sizing:border-box;
    // padding-top: constant(safe-area-inset-top);    
    padding-right: constant(safe-area-inset-right);    
    // padding-bottom: constant(safe-area-inset-bottom);    
    padding-left: constant(safe-area-inset-left);
}
.main{
    width:100%;
    height:100%;
}
</style>

但是经过测试在IOS11_2_1版本中，safe-area-inset失效了，需要左右留空的情况可以通过JS判断IPX机型以及IOS版本号加上特殊处理。
后来到IOS11.3版本中，又变成全屏失效了，只能判断到11.3版本的直接去掉viewport-fit=cover"的设置,即只能左右安全区域留空，无法全屏显示

<style>
body{   
    &.ipx_ios11_2{       
        .wrapper{ 
            padding-left:44px;           
            padding-right:44px;       
        }   
    }
}
</style>

<script>
    var isIphoneX=/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375);          
    var isIos11_2=navigator.userAgent.toLowerCase().indexOf("cpu iphone os 11_2")>-1 ; 
    var isIos11_3=navigator.userAgent.toLowerCase().indexOf("cpu iphone os 11_3")>-1 ; 
    //如果需要左右留空 ，ios11.2下需要增加以下处理 ,全屏展示的无需处理             
    if(isIphoneX&&isIos11_2&&window.orientation!=0&&window.orientation!=180){                   
        $(document.body).addClass("ipx_ios11_2");   
    }
    //IOS11.3下无法支持全屏设置，只能左右留空，直接修改 viewport
    if(isIphoneX&&isIos11_3&&window.orientation!=0&&window.orientation!=180){
    $("meta[name='viewport']").attr('content', "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui,viewport-fit=contain");
    }
</script>

如下图所示（图1）横屏左边第一个灰色块大小为3042
黑色刘海尺寸为30211，绿色触控操作安全区域宽度为44
第二个灰色块为30*82，