建站百科

文章导读：本文主要阐述了“网站快速适配手机iPhone X”网站如何快速适配手机iPhone X？ 众所周知iPhone X 有刘海设计，面对 iPhone X 这个奇葩的屏幕，你准备好了吗？因为网站在 iPhon...，本文由跨屏网最后更新于2020-07-24，全文共994个字，预计阅读时长3分18秒。

因为网站在 iPhone X 横屏时，可能会有些问题：

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

解决方案

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   

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

写在最后，以上就是对于“网站快速适配手机iPhone X”的一些看法，欢迎指正、交流。

当前名称：网站快速适配手机iPhone X
网站网址：http://test.kuaping.com/article/show168.html