iPhone X昨日已经开抢了
然而面对 iPhone X 这个奇葩的屏幕
你和你的编辑器准备好了吗?
因为 iPhone X 的刘海设计,Web 在 iPhone X横屏时,可能会有些问题:
<meta name="viewport" content="width=device-width,
(接上)initial-scale=1.0, viewport-fit=cover">
在 viewport 的 meta 属性中,添加 viewport-fit=cover
即可。
viewport-fit 默认值为 auto/contain
,全屏值为cover
,是不是感觉很熟悉?嗯,和 background-size
以及 object-fit
一样的。
body{
padding:
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left);
}
嗯,constant()
以及 safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-left
是 iOS 11 webview 新增加的特性,专门用于应对刘海的。
当然,这里的padding
只是用于匹配iPhone X默认的安全区域的,你可以设置任何值,不过建议要不小于默认的安全区域值。
当前版本横屏时,各属性的值
safe-area-inset-top = 0
safe-area-inset-right = 44px
safe-area-inset-bottom = 21px
safe-area-inset-left = 44px
竖屏时各值都是 0
但竖屏时需要特别留意
status-bar(44px) 和 home-indicator(34px)
完成以上操作
这样就能一分钟适配iPhoneX啦
是不是很简单
快行动起来让你WEB和APP走在时尚的前列线上
本文作者:掘金
原文链接:https://juejin.im/post/59f302eb518825550f53d839