关于iphonX横屏显示兼容问题

1.浏览器默认两边有加44像素留白(viewport-fit=container),如图显示
2.微信内嵌无论有没有设置viewport-fit=cover,均为全屏显示
3.ISO11.2之前的版本游戏内嵌时如果默认使用viewport-fit=containe设置,会导致左边留空,右边超出屏幕并出现横向滚动条的情况,所以要使用viewport-fit=cover设置,以全屏显示,

同时使用全屏设置需要注意刘海遮挡的问题。
若需要左右留空可以使用safa-area-inset-***样式来将左右和上下的安全区域留空(若遮挡并不影响页面显示可不用设置):


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




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

关于iphonX横屏显示兼容问题_第1张图片
图1

关于iphonX横屏显示兼容问题_第2张图片
图2

你可能感兴趣的:(关于iphonX横屏显示兼容问题)