问题描述

iPhoneX由于新增了刘海以及取消了按键采用了小黑条的形**式**，导致会出现以下的问题：样式边缘出现了空白（没有覆盖整个可视区域）

iphoneX样式适配 - 图1

我们可以通过meta设置解决这个问题

  1. <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

iphoneX样式适配 - 图2

于是出现了新的问题，部分内容被刘海和黑条遮盖了，接下来就有两种解决方案：

方案一：通过媒体查询匹配到iPhone X然后进行样式修改

  1. //iphoneX、iphoneXs
  2. @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  3. }
  4. 即: 设备屏幕可见宽度为375px， 可见高度为812px及设备像素比为3
  6. //iphone Xs Max
  7. @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
  8. }
  10. //iphone XR
  11. @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
  12. }
  13. //横屏
  14. @media all and (orientation : landscape) { 
  15. } 
  17. //竖屏
  18. @media all and (orientation : portrait){ 
  19. }

其他参考链接：运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏

方案二：根据苹果特定变量来筛选、匹配

env()最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-*值可用于确保内容即使在非矩形的视区中也可以完全显示。

iphoneX样式适配 - 图3

注意：viewport-fit=cover和env(safe-area-inset-bottom)需要一起使用

  1. <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
  1. // @supports意为支持
  2. // bottom: constant(safe-area-inset-bottom)) 或 bottom: env(safe-area-inset-bottom)
  3. // 语法的话，以下css可用
  5. @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  6.   .iphone-x::after { // 给需要适配黑条的内容加上 iphone-x 的 class
  7.     display: block;
  8.     content: "";
  9.     padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  10.     padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  11.   }
  12. }

以上适用于手机端底部设置tab栏**，给tab加上特定的padding-bottom
image.png**

官方给出了另一种**css方案来解决整体的遮盖问题**：

iphoneX样式适配 - 图5

以下只解决了横版问题，竖屏时文章的padding仍然有问题（顶头了）：

  1. .post {
  2.     padding: 12px;
  3.     padding-left: env(safe-area-inset-left);
  4.     padding-right: env(safe-area-inset-right);
  5. }

iphoneX样式适配 - 图6 iphoneX样式适配 - 图7

max()好用，但是**太新了**，需要注意自己浏览器的支持情况！

  1. @supports(padding: max(0px)) { // @supports意为支持padding max语法的话，以下css可用
  2.     .post {
  3.         padding-left: max(12px, env(safe-area-inset-left));
  4.         padding-right: max(12px, env(safe-area-inset-right));
  5.     }
  6. }

其他参考链接：
英文文档：https://webkit.org/blog/7929/designing-websites-for-iphone-x/
中文文档：https://www.javascriptcn.com/read-78787.html