设计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()会更容易,并且在将来实现有效的响应式设计时将非常有帮助。