iphonex适配

时间 2019-11-08

标签 iphonex 适配繁體版

原文原文链接

第一步：设置网页在可视窗口的布局方式
ios11新增 viweport-fit 属性，使得页面内容彻底覆盖整个窗口：ios

<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 这个变量，由于它对应的就是小黑条的高度（横竖屏时值不同）。code

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

第三步：fixed 元素的适配
● 类型一：fixed 彻底吸底元素（bottom = 0）it

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

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

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