明天就要开抢 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
是 iOS 11 webview 新增加的特性,专门用于应对刘海的。。。
- safe-area-inset-left
当然,这里的
只是用于匹配iPhone X默认的安全区域的,你可以设置任何值,不过建议要不小于默认的安全区域值。
- padding
当前版本,横屏时,各属性的值:
- 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)。
来源: https://juejin.im/post/59f302eb518825550f53d839