主机格调

起因:项目iOS APP内嵌H5页面,提供的webview容器是全屏的,所以H5页面要处理iPhone X的刘海头。

iPhone XS等手机还未发布之前,我们已经做过iPhone X的一些兼容,代码如下:

var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;

如果是iPhone X,把顶部增加高度30px的容器垫高,避开刘海头区域,这样标题正好从刘海头下面开始展示,如下图:

因为自己当时还没有用iPhone X,只知道iPhone X有刘海头,不知道其他细节问题。

到了9月份,苹果发布了iPhone XS、iPhone XS Max、iPhone XR,有同事在Mac下的iPhone模拟器访问,发现这个页面iPhone XS Max下有问题。我研究了下,原来当初只判断了iPhone X加垫高,其他几个机型都未判断,所以就很自然的写了新机型,加上判断:

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

原来代码是if(isIPhoneX)垫高,现在改成if(isIPhoneX || isIPhoneXSMax || isIPhoneXR)垫高,这个事情就过去了,因为这个时候只是发布新iPhone,并未销售。

到9月底,我自己买了iPhone XS,因为天天用,发现苹果的设计规范头部这里有蹊跷,规范里的标题全部不是刘海头下方上下居中,而是靠下,如图:

很明显,我做的兼容头部,标题“分类”二字正好是在刘海头下方上下居中,而官方的头部标题,“照片”二字、左侧返回、右侧“选择”全部靠下。看了其他的APP,包括微信等,全部是靠下的。

无意中发现,原来标题靠下,是留给返回按钮的:

真是恍然大悟,难怪官方提供的安全区域代码constant(safe-area-inset-top) env(safe-area-inset-top),使用后都在刘海头下面,如图(黑灰色区域状态栏):

当初没有用安全区域代码,一方面是因为页面有悬浮容器,会悬浮到安全区域外部,兼容页面正文麻烦,另一方面就是正文内容靠下,离刘海头有一段距离,感觉太丑干脆不用。

总结:依旧不用安全区域代码,如果要做刘海头,if(isIPhoneX || isIPhoneXSMax || isIPhoneXR)垫高44px。

备注:iPhone X、iPhone XS、iPhone XS Max刘海头高度30px,iPhone XR刘海头高度33px,效果见本文第一张图。本文提到的30px、33px、44px,均为initial-scale=1下。设计稿像素应该都需要乘以2倍或3倍。

本文有参考《iPhoneXS、XS Max与iPhoneXR 适配

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/574.html