关于iphonX横屏显示兼容问题
2018-05-23 本文已影响170人
只会前端的切图仔
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，
图1
图2
