H5 页面适配 iPhoneX

[liqinuo]

对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。

第一步：设置网页在可视窗口的布局方式

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步：页面主体内容限定在安全区域内

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的适配

类型一：fixed 完全吸底元素（bottom = 0）

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

更详细请看：https://aotu.io/notes/2017/11/27/iphonex/

[Sobcat]

👍

[cleverboy32]

为什么我不行啊

[seechangan]

我记得有一篇rem适配的文章，是因为你们网页改版了嘛 找不到了。。。 都否给个地址

[Zenquan]

我记得有一篇rem适配的文章，是因为你们网页改版了嘛 找不到了。。。 都否给个地址

是不是这个？https://jelly.jd.com/article/6006b1055b6c6a01506c8801

[seechangan]

十分感谢！！