iphonex适配

2019年8月24日 227次阅读 来源: 呼啦啦

第一步：设置网页在可视窗口的规划体式格局
ios11新增 viweport-fit 属性，使得页面内容完整掩盖全部窗口：

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

第二步：页面主体内容限定在平安地区内
env() 和 constant()ios11新增特征

● safe-area-inset-left：平安地区间隔左侧边境间隔
● safe-area-inset-right：平安地区间隔右侧边境间隔
● safe-area-inset-top：平安地区间隔顶部边境间隔
● safe-area-inset-bottom：平安地区间隔底部边境间隔

这里我们只须要关注 safe-area-inset-bottom 这个变量，由于它对应的就是小黑条的高度（反正屏时价不一样）。

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);
}

第四步：假如我们只愿望 iPhoneX 才须要新增适配款式，我们能够合营 @supports 来断绝兼容款式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    div {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
    }
}
    原文作者：呼啦啦
    原文地址: https://segmentfault.com/a/1190000013299480
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞