Safari 浏览器默认将网页在安全区域内显示，避免主要内容被圆角或传感器截断。

安全区域外会以页面背景色 background-color 填充，一般在 <body> 或 <html> 中指定。这足以应付大多数网站。

对于其他网站 - 比如包含通栏导航条的网站（如下图所示），可选择 iOS 11 搭载的崭新 WebKit API ，在全面屏上实现更好的显示效果。

点击图片可观看对应的在线网页 demo。

default inset behavior

使用整屏

第一个新特性，是对 viewport 标签的扩展，名为 viewport-fit，可精细控制内缩行为。它在 iOS 11 中可用。

viewport-fit 默认值为 auto，效果如上图所示。为了让页面内容铺满屏幕，可以设定 viewport-fit 为 cover。比如：

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

刷新页面，效果如下：

viewport fit cover

尽管内容铺满屏幕，主要内容却被圆角和传感器区域截断，且底部导航也变得难用。

遵守安全区域

为提升页面可用性，设定 viewport-fit=cover 后，下一步需设定主要内容的内边距。这样，既能充分利用寸土寸金的屏幕，还能让主要内容躲避边角和传感器的截断。

safe areas 1

iOS 11 的 WebKit 包含一个 CSS 函数：env()，以及四个变量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, safe-area-inset-bottom。综合两者，可以得到当前安全区域的四个内边距。

env() 同 var() 一样，比如：

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

不支持 env() 的浏览器会忽略它。因此，每条 env() 样式声明最好考虑兼容性。

iOS 11 最早的函数名为 constant()，自打 Safari Technology Preview 41 及 iOS 11.2 beta 开始，constant() 遭弃用，替换为 env()。若有必要，可利用 CSS 回退机制使用两者，其他情况下应优先使用 env()。

使用 min() 和 max() 整合

本小节的特性存在于 Safari Technology Preview 41 和 iOS 11.2 beta 版中。

如果网站设计采用了安全区域规范，就很难同时设定最小内边距。在上面例子中，如果把 12px 左内边距替换为 env(safe-area-inset-left)，当手机恢复竖直状态时，安全区域左边距会变为 0，文字就会紧贴屏幕左边界。

no margins

为了解决这个问题，我们可以将边距设定为默认边距和安全区域边距两者的较大值。通过全新的 CSS 函数 min() 和 max() 可以实现。

在本例中，我们需使用 max()：

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

⚠️ 注意：需要使用 @supports 检测 min 和 max 是否可用。

在上面例子中，当手机处于竖直状态时，env(safe-area-inset-left) 返回 0px，此时 max() 函数得到 12px。在水平状态下，由于传感器外壳的存在，env(safe-area-inset-left) 会变得较大，从而被 max() 函数返回。这样，重要内容始终可见。

max safe areas insets

REF