设计iPhoneX网站

设计iPhoneX网站

Safari开箱即用，可以在新iPhone X的边缘显示屏上精美地显示您现有的网站。内容会自动插入显示屏安全区域内，因此不会被圆角或设备的传感器外壳遮盖。

插入区域填充有页面的background-color（在或元素上指定），以与页面的其余部分融合。对于许多网站来说，这就足够了。如果您的页面仅包含纯色以上的文本和图像，则默认插图看起来不错。

其他页面（尤其是那些使用全角水平导航栏设计的页面，例如下面的页面）可以选择进一步扩展以充分利用新显示器的功能。《iPhone X人机界面指南》详细介绍了要记住的一些一般设计原则，UIKit文档讨论了本机应用程序可以采用的特定机制，以确保它们看起来不错。您的网站可以利用iOS 11中引入的一些类似WebKit API的新功能，以充分利用显示器边缘到边缘的特性。

使用整个屏幕

第一个新功能是对viewport称为的现有元标记的扩展，该标记viewport-fit提供对插入行为的控制。viewport-fit在iOS 11中可用。

的默认值viewport-fit是auto，这会导致上述自动插入行为。为了禁用该行为并使页面布局为屏幕的整个尺寸，可以将其设置viewport-fit为cover。这样做之后，我们的viewportmeta标签现在看起来像这样：

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

重新加载后，导航栏看起来更好，从一边到另一边。但是，立即清楚为什么尊重系统的安全区域插图很重要：设备的传感器外壳遮盖了页面的某些内容，并且底部导航栏很难使用。

尊重安全区

采用后使页面再次可用的下一步viewport-fit=cover是将填充选择性地应用于包含重要内容的元素，以确保它们不会被屏幕的形状所遮挡。这将导致页面充分利用iPhone X上增加的屏幕空间，同时进行动态调整，以避免出现角，传感器外壳和用于访问主屏幕的指示器的页面。

为了实现这一目标，WebKit的iOS中11包括一个新的CSS功能，env()以及一组四个预定义的环境变量，safe-area-inset-left，safe-area-inset-right，safe-area-inset-top，和safe-area-inset-bottom。组合使用时，它们允许样式声明引用每侧安全区域插图的当前大小。

iOS 11中附带的env（）函数名称为constant（）。从Safari Technology Preview 41和iOS 11.2 beta开始，constant（）已被删除并被env（）取代。如有必要，您可以使用CSS后备机制来支持两个版本，但以后应该更喜欢env（）。

env()在任何地方都var()可以工作—例如，在padding属性内：

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

对于不支持的浏览器，env()包含它的样式规则将被忽略；因此，重要的是继续使用单独为所有声明指定备用规则env()。

通过min（）和max（）将所有内容放在一起

本部分介绍了从Safari技术预览版41和iOS 11.2 Beta开始可用的功能。
如果您在网站设计中采用安全区域插图，则可能会注意到，除了安全区域插图外，指定您还需要最小填充量有些困难。在上面的页面中，我们用替换了12px的左侧填充env(safe-area-inset-left)，当我们旋转回纵向时，左侧安全区域插图变为0px，文本紧靠屏幕边缘。

为了解决这个问题，我们想指定我们的填充应该是默认的填充或安全区域插图，以较大者为准。这可以通过实现全新的CSS功能min()和max()将在未来的Safari浏览器技术预览版本中提供。这两个函数均采用任意数量的参数，并返回最小值或最大值。它们可以在内部使用calc()，也可以彼此嵌套使用，并且两个函数都允许calc()在它们内部进行类似数学的运算。

对于这种情况，我们要使用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来检测最小值和最大值是很重要的，因为并不是所有地方都支持它们，并且由于CSS 对无效变量的处理，因此不要在@supports查询中指定变量。

在我们的示例页面中，纵向显示env(safe-area-inset-left)为0px，因此该max()函数解析为12px。在横向模式中，env(safe-area-inset-left)由于传感器外壳而变大时，该max()功能将解析为该大小，以确保始终可见其中的重要内容。

经验丰富的Web开发人员可能以前曾遇到过“ CSS锁定”机制，该机制通常用于将CSS属性限制在特定值范围内。同时使用min()和max()会更容易，并且在将来实现有效的响应式设计时将非常有帮助。