285

web app 一分钟适配 iPhone X

 6 years ago
source link: https://juejin.im/post/59f302eb518825550f53d839
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

web app 一分钟适配 iPhone X

2017年10月27日 09:57 ·  阅读 7603

明天就要开抢 iPhone X 了，然而面对 iPhone X 这个奇葩的屏幕，你准备好了吗？

eb5c278717011753c23b5473ccec35d1~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp

因为 iPhone X 的刘海设计，Web 在 iPhone X

时，可能会有些问题：
  1. 默认情况，iPhone X 会将页面填充到安全区域(safe area)，就像上面的图一样，一般情况下是没有问题的；
  2. 但如果是全屏 Web App 就会有问题了，比如背景色和页面的契合程度之类的；
  3. 有的 iOS app 内置 WKwebview 可能会为了避免一些bug，而采用统一的行为，就是禁用 iOS 11 自己的内容区域判断，从而让 H5 默认全屏，如下图：
8bf6cdeb1aa3d9b5fcb0fd74273918ac~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp

1. 默认全屏

<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 一样的。

2. 设置页面边距为安全区域边距

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  
复制代码
d7e44d2ae2e449f8c1a22a6403f3da6d~tplv-t2oaga2asx-zoom-in-crop-mark:1304:0:0:0.awebp

竖屏时各值都是 0，但竖屏时需要特别留意 status-bar(44px) 和 home-indicator(34px)。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK