让网站适应iphoneX...下面关于安全区域插入的部分已于2017年10月31日更新，以反映iOS11.2测试版的变化。.开箱即用，Safari可以在新iPhoneX的无边框显示屏上精美地显示您现有的网站。内容会自动插入显示屏的安全区域内，因此不会被圆角或设备的传感器外壳遮挡。无需任何修改，safari即可在ihponeX中精美展示网页。网页内容会显示在安全区域，因此网页内容不会被设备的圆角和感应条遮挡。插入区域填充了页面的背景颜色（在
或元素中指定）以与页面的其余部分混合。对于许多网站来说，这就足够了。如果您的页面只有纯色背景上方的文本和图像，则默认插图看起来会很棒。安全区域以外的地方（即屏幕上下形状奇怪的地方）会自动填充背景色（定义在body或html元素上的背景色）。在大多数情况下，这足以实现兼容性。只要您的页面具有固定的背景颜色，这种默认的填充方法就足够了。其他页面——尤其是那些设计有全宽水平导航栏的页面，如下面的页面——可以选择更进一步以充分利用新显示的功能。iPhoneX人机界面指南详细介绍了一些需要牢记的一般设计原则，而UIKit文档讨论了本机应用程序可以采用的特定机制，以确保它们看起来不错。您的网站可以利用iOS11中引入的一些类似的新WebKitAPI来充分利用显示的边到边特性。其他页面，尤其是带有导航栏的页面，可以选择进一步优化以利用新的显示功能。在ios11中，你的网站可以使用新的webkitapi适配显示。在阅读这篇文章时，您可以点击任何图像来访问相应的实时演示页面并查看源代码。【注：原文请点击图片】图片：Safari的默认兼容行为。使用整个屏幕第一个新功能是对现有视口元标记的扩展，称为viewport-fit，它提供了对插入行为的控制。viewport-fit在iOS11中可用。viewport标签有一个新的属性viewport-fit，这个属性可以控制视图的显示行为。viewport-fit在ios11上可用。viewport-fit的默认值是auto，这会导致上面看到的自动插入行为。为了禁用该行为并使页面布局为屏幕的全尺寸，您可以将viewport-fit设置为cover。这样做之后，我们的viewport元标记现在看起来像这样：viewport-fit的默认值是auto，这个值的行为与上面的屏幕截图中的一样，页面不会拉伸到屏幕边缘。将此值设置为cover将使页面覆盖整个页面，包括屏幕的边缘。示例代码：
重新加载后，导航栏看起来好多了，从边到边。然而，立即清楚为什么尊重系统的安全区域嵌入很重要：一些页面内容被设备的传感器外壳遮挡，底部导航栏很难使用。页面刷新后，导航栏已经可以填满屏幕边缘了。同时，问题也很明显：内容被感应栏遮挡，底部导航栏和虚拟按钮重叠。图：使用viewport-fit=cover来填满整个屏幕。使用viewport-fit=cover来填充整个屏幕。尊重安全区域在采用viewport-fit=cover之后，为了让我们的页面再次可用，下一步是有选择地对包含重要内容的元素应用填充，以确保它们不会被屏幕的形状遮挡。这将导致页面充分利用iPhoneX上增加的屏幕空间，同时动态调整以避免角落、传感器外壳和用于访问主屏幕的指示器。使用viewport-fit=cover后，需要在一些地方加padding，避免被遮挡。如果能动态适配iPhoneX屏幕的圆角、顶部的感应条、底部的虚拟按键，那你就可以充分享受iPhoneX的大屏了。图：iPhoneX上的安全区和不安全区横向，带有插图。iPhoneX横屏安全区，以及几个固定变量的示意图。为实现这一点，iOS11中的WebKit包含一个新的CSS函数env()和一组四个预定义的环境变量，safe-area-inset-left、safe-area-inset-right、safe-area-inset-top和safe-area-inset-bottom。组合时，这些允许样式声明引用每一侧的安全区域插入的当前大小。为了达到动态适配的目的，ios11的webkit提供了一个新的css方法：env()，并且有四个预定义的环境变量，safe-area-inset-left，safe-area-inset-right，safe-area-inset-top和safe-area-inset-bottom。使用这些变量，可以得到屏幕安全区域距离屏幕边缘的距离。iOS11中附带的env()函数名称为constant()。从SafariTechnologyPreview41和iOS11.2beta开始，constant()已被删除并替换为env()。如有必要，您可以使用CSS后备机制来支持这两个版本，但以后应该更喜欢env()。ios11开始支持env()方法，最初命名为constant()。在SafariTechnologyPreview41和iOS11.2beta中，constant()已重命名为env()。可以使用css权重机制适配所有版本。如非必要，使用env()适配最新版本。env()在var()作用的任何地方都有效——例如，在padding属性内部：env()的使用方式与var()基本相同，例如，在定义padding时：.post{padding:12px;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}对于不支持env()的浏览器，包含它的样式规则将被忽略；出于这个原因，继续为使用env()的任何声明单独指定回退规则很重要。当浏览器不支持env()时，该样式将失效；因此，这种使用env()的方式应该单独使用定义。图：尊重安全区域插图，以便重要内容可见。利用了环境变量的适配效果。使用min()和max()将它们整合在一起本节涵盖从Safari技术预览41和iOS11.2测试版开始可用的功能。这部分在SafariTechnologyPreview41和iOS11.2beta开始支持。如果您在网站设计中采用安全区域嵌入，您可能会注意到，除了安全区域嵌入之外，您还需要最小填充有点困难。在上面的页面中，我们用env(safe-area-inset-left)替换了12px的左内边距，当我们旋转回纵向时，左安全区域inset变为0px，文本紧邻屏幕边缘。使用安全区变量时，并不能解决所有问题。比如上面的页面，横屏时env(safe-area-inset-left)有值，竖屏时env(safe-area-inset-left)=0px，此时，文本将挤到屏幕的边缘。图：安全区域插图不能替代边距。使用安全区域插图引起的问题。为了解决这个问题，我们要指定我们的填充应该是默认填充或安全区域插入，以较大者为准。这可以通过全新的CSS函数min()和max()来实现，它们将在未来的Safari技术预览版中提供。这两个函数都接受任意数量的参数并返回最小值或最大值。它们可以在calc()内部使用，或者相互嵌套，并且这两个函数都允许在它们内部进行类似calc()的数学运算。要解决这个问题，有必要为填充设置一个默认值。当safe-area-inset-left有值时，设置为safe-area-inset-left，没有值时使用默认值。我们可以使用一组新的CSS函数min()和max()来解决这个问题。这两个函数可以接受任意数量的参数并返回最大或最小的参数。它们也可以在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查询中指定变量。注意：@supports语句可以检查是否支持max，但是不要在里面使用变量，例如：@supports(padding:max(env(safe-area-inset-left)))，因为css返回默认值对于无效变量，这是本例中填充的初始值。【这里的具体细节可以参考：https://drafts.c??sswg.org/css-...，本文最后也有翻译。】在我们的示例页面中，在竖屏方向，env(safe-area-inset-left)解析为0px，所以max()函数解析为12px。在风景中，当env(safe-area-inset-left)由于传感器外壳较大时，max()函数将解析为该大小，以确保其中的重要内容始终可见。在上面的例子中，当屏幕是垂直的时候，env(safe-area-inset-left)是0，所以max函数返回了12px。横屏时，env(safe-area-inset-left)的值会大于12，所以max函数会返回env(safe-area-inset-left)的值。这样保证了页面的动态适应性。图：使用max()将安全区域插入与传统边距相结合。使用max函数来保证竖屏兼容性。有经验的Web开发人员以前可能遇到过“CSS锁”机制，通常用于将CSS属性限制在特定范围内的值。一起使用min()和max()可以使这变得更加容易，并且对将来实现有效的响应式设计非常有帮助。min()和max()函数的使用场景更多，可以帮助开发者更轻松地创建更多兼容页面。参考：ExplanationofInvalidVariables原文地址：https://drafts.c??sswg.org/css-...直接翻译了3.1节的例子，比较直观。例如，在下面的代码中：例如，下面的代码::root{--not-a-color:20px;}p{背景颜色：红色；}p{背景色：var(--not-a-color);元素将具有透明背景（背景颜色的初始值），而不是红色背景。如果自定义属性本身未设置或包含无效的var()函数，也会发生同样的情况。p元素的背景将是透明的（即background-color值的初始值），而不是红色。该变量的无效值与不写background-color的表现是一致的。请注意这与作者直接在样式表中编写background-color:20px时发生的情况之间的区别——那将是一个正常的语法错误，这将导致规则被丢弃，因此background-color:red规则将被使用。注意这种情况和直接写错background-color:20px的区别。如果直接写错background-color:20px，错误的样式会失效，而background-color:red仍然有效。注意：计算值时间无效概念的存在是因为变量不能像其他语法错误那样“提前失败”，所以当用户代理意识到属性值无效时，它已经丢弃了其他级联值。:invalidvariablevalue的问题是因为variableerror的时机比较晚，所以当浏览器识别到这个variablevalue是invalid的时候，已经丢弃了之前定义的其他有效值。
