为iPhone X设计网站
时间：2023-05-16 13:33:01 | 来源：网站运营
时间：2023-05-16 13:33:01 来源：网站运营
为iPhone X设计网站：原文阅读
在拥有全面屏的新iPhone X上，不需要任何设置，Safari就可以完美地显示你现有的网站。内容自动嵌入在屏幕的安全区域内，因此既不会被圆角遮挡，也不会被设备的传感器的外壳挡住。
内嵌的区域用页面的background-color（如 <body>或<html> 元素）来填充，用来与页面的其他部分融为一体。对于很多网站来说，这就足够了。如果你的页面背景是纯色，页面上只有文本和图片，默认的内嵌方式将会看起来很赞。
其他页面——尤其是那些设计成横向全屏导航栏的页面，像以下页面——可以选择深入研究并充分利用新屏幕的这些特征。iPhone X 人机交互指南详述了一些需要铭记在心的通用的设计原则，UIKit文档也讨论了原生app可以采用什么具体机制来保证它们看起来很好。你的网站可以使用在iOS 11里介绍的新增的一些相似的WebKit API ，来充分利用这种无边框设计特性的屏幕。
Safari默认的嵌入的行为
利用整块屏幕
第一个新特性是viewport-fit，对现有的viewpoint meta标签进行了扩充,可以控制内容嵌入的方式。viewport-fit在iOS 11可以使用。
viewport-fit的默认值是auto,这个值导致自动嵌入内容的效果，如上所示。为了禁用这个行为，并且使得页面展示成全屏效果，你可以把viewport-fit设置成cover。设置完这些后，我们的viewport meta标签现在看起来像这样：
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>重新加载后，导航栏看起来好很多了，拉通显示了。然而，为什么考虑系统的安全区域部分很重要立马就清楚了：一些页面内容被设备的传感器的外壳遮挡住了，而且底部的导航栏也很难用。
用viewport-fit=cover来填充整个屏幕
考虑安全区域
在使用viewport-fit=cover后，为了使我们的页面再次可用，下一步是选择给包含重要内容的元素设置内边距，确保他们不被屏幕的形状遮挡。这将导致页面在iPhoneX上充分利用新增屏幕固定区域的优点，在动态调整的过程中来避开边角、传感器外壳和访问主屏幕的指示按钮。
在 iPhone X 的水平方向上的安全和不安全的区域，用 inset constants表示。
为了实现上述效果，iOS 11 的webki增加了一个新的CSS方法，constant()，和一套四个预定义的常量：safe-area-inset-left、safe-area-inset-right、 safe-area-inset-top、 以及safe-area-inset-bottom。当组合使用时，这些属性允许参照每一边安全区域的当前尺寸来进行样式声明。
CSS工作组最近完成了增加这个特征值，但是用了别的名字。用的时候请记住。
var()在哪里使用，constant()就在哪里使用--例如，在padding属性里：
.post { padding: 12px; padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right);}对于不支持constant()的浏览器，包含它的样式规则将会被忽略；因此，对于任何使用constant()声明仍然需要单独指定回退方案，这很重要。
为了重要内容可见，考虑安全区域。
综合以上情况,用min()和max()
这一部分涉及当前ios11并不包含的特性。
如果你在网站设计中采用安全区域的插入常量，你可能注意到，指定你想要在安全区域内嵌区域外设置最小内边距有点难。在以上页面，我们用constant(safe-area-inset-left)来替换我们的12px的左内边距，当我们旋转到竖屏，左边安全区域inset变成了0px,并且文本立马就紧贴着屏幕边框了。
安全区域insets不是外边距的替代品。
为了解决这个问题，我们想指定的我们的内边距应该是默认的内边距或是安全区域距离,这样更好。这可以用全新的CSS 方法min() 和max()来实现,这个将在未来Safari Technology Preview发布后可以用。这个两个方法以任意数字为入参，返回最小值或最大值。可以在calc()内使用，或是彼此嵌套，这两个方法循序calc()-像他们内部的数学运算。
在这种情况下，我们想用max():
@supports(padding: max(0px)) {.post {padding-left: max(12px, constant(safe-area-inset-left));padding-right: max(12px, constant(safe-area-inset-right));}}使用@supports来特性检测min和max很重要，因为这两个属性并不是哪里都支持的，由于CSS对待非法变量的规则，不要在你的@supports查询里指明一个变量。
在我们的示例页面里，竖屏方向，constant(safe-area-inset-left)变成了0px,因此，max()方法变成12px。在横屏模式，当constant(safe-area-inset-left)由于传感器外壳变得更大时，相反，max()方法决定了那个尺寸，保证里面的重要内容总是可见的。
使用max()来把安全区域距离和传统的外边距结合起来。
有经验的web开发者可能以前遇到过“CSS锁”的机制，通常用来把CSS属性限制在一个特定范围的值内。结合使用min()和max() 让处理这种情况更容易，在将来的实现有效的响应式设计里将会非常有用。
反馈和问题
今天，你可以开始使用viewport-fit和安全区域距离了，通过在iPhoneX模拟器上使用Safari，结合Xcode 9。我们很乐意听到你用所有的这些特性的使用情况，所以，请随意点，给web-evangelist@apple.com发送反馈，或是在Twitter上@webkit，并在WebKit bug追踪提出任意你遇到的bug。
在线咨询
