IPhoneX网页布局

安全区域

何为安全区域，简单来讲就是我们在此区域内设置一些交互的按钮或者链接不会被影响。下图的话底部按钮就会受到一些影响，图片随意截取，请勿在意：

viewport-fit

可喜可贺，IOS11给我们提供了一个新特性 viewport-fit

值	说明
auto/contain	页面默认内嵌
cover	页面充满屏幕

viewport-fit默认情况下是 auto 我们可以看一下同一个页面不设置 viewport-fit 和设置其为 cover 的两种表现形式：

• 不设置：
  

• 设置为 cover：
  

当然，在横屏情况下我们可以更清晰地看到，设置cover可以使我们的页面导航和tag更加符合设计，但是内部的我们应该怎样进行布局呢？是直接使用 padding 还是有别的方法呢？

CSS constant()函数

我们可以通过计算其padding值来进行布局，解决文字被埋在传感器底部的问题。

但是IOS11给我们提供了更简单的办法。WebKit 中新增了一个 CSS 函数 constant()，以及一组 四个已经定义好的常量： safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, safe-area-inset-bottom。这四个常量分别代表了每个方向的非安全区域的值：

那我们试着现在给刚刚的被传感器覆盖的页面增加一些css：

.con {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

是的。完美的效果。

瑕疵问题

但是如果现在我们现在把手机换成竖屏的话，会出现一些小瑕疵，因为我们设置的是 padding-left 和 padding-right 为安全区域外的变局的常量，所以当我们竖过来后，竖屏模式的 safe-area-inset-left 和 safe-area-inset-right 为0，那么文字还是会贴边的。

新的CSS函数 min() 和 max() 可以帮我们在不通过JS的情况下简单解决这个问题。（PS：现Safari暂未支持）

@supports(padding: max(0px)) {
    .con {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

这样的话 padding-left 会取较大的那个值。当 safe-area-inset-left 为0时候，其值会为 12px。

本文讲的一些方法对于现阶段的IPhone网页布局其实还是有一些兼容问题

• constant() 需要我们对不支持的浏览器做一些兼容回退，并且CSS工作组对这个方法使用了不同的名称
• max() 和 min() 方法现阶段还没有支持，我们还是要采用判断横竖屏的方法进行动态的设置，或者直接也抛弃 constant() 做固定的padding值。
• 在使用定位的时候如果和理想效果有偏差可以试试设置 body,html 的高度为 100%

全屏时代即将来临，未来我们应该有更多的方法进行网页布局。