iPhone X的Web设计

在新的iPhone X的Safari浏览器中为你的网站显示留有边缘。内容自动设置在显示的安全区域内,这样它就不会被圆角或设备的传感器外壳遮挡住(俗称iPhone X的刘海)。

<body><html>元素中指定与页面的background-color一样的颜色用来填充整个页面。这样页面的安全区域和其余部分混合在一起。对于许多网站来说,这已经足够了。如果你的页面只有文本和图片,那么背景色的设置看起来也非常不错。

对于其他页面——特别是那些设计全宽水平导航栏的页面,比如像下图的页面,可以选择稍微深入一点,充分利用新显示的功能。iPhone X人机界面指南详细介绍了一些通用的设计原则,并且UIKit文档讨论了本地应用程序可以采用的特定机制,以确保它们看起来不错。你的网站可以利用iOS 11中引入的一些类似WebKit API来充分利用边缘的优势。

在阅读这篇文章的时候,你可以点击任何图片来访问相应的Demo页,并查看源代码:

使用整个屏幕

第一个新特性是对现有viewport meta标签的扩展,称为viewport-fit,它提供对嵌入(insetting)行为的控制。在iOS 11中可以使用viewport-fit

viewport-fit的默认值是auto,上面看到的的效果就默认的嵌入行为。为了使该行为失效,并导致页面显示到屏幕的大小,你可以设置viewport-fit:cover来覆盖。在这样做之后,我们的viewport meta标记看起来像这样:

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

重新加载后,导航栏的边缘看起来好多了。然而,很明显,为什么要尊重系统的安全区域设置是很重要:一些页面的内容被设备的传感器外壳遮挡了,而底部的导航栏非常难以使用。

尊重安全区域

在采用viewport-fit="cover"之后,下一步要使我们的页面再次可用,是为了对包含重要内容的元素有选择性的应用内距,以确保它们不会被屏幕的形状所掩盖。这将导致一个页面允分利用iPhone X上增加的区域,同时动态调整以避免圆角、传感器外壳和访问主屏幕的指示器。

为了实现这一点,iOS 11中的WebKit包含了一个新的CSS函数constant(),以及一组四个预定义的常量safe-area-inset-left, safe-area-inset-right, safe-area-inset-topsafe-area-inset-bottom。当合并一起使用时,允许样式引用每个方面的安全区域的大小。

CSS工作组最近决定添加这个特性,但是使用了不同的名称,请记住这一点。

constant()的工作类似于var(),比如下面的示例,在padding属性使用:

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

对于不支持constant()的浏览器,浏览器将会忽略它。出于这个原因,有一点非常重要,单独使用constant()

使用min()和max()将其全部组合在一起

这部内容目前在iOS 11中并不包括的特性。

如果你在你的网站设计中采用constant()来设置安全区域,你可能会注意到,在设置安全区域时,你很难指定你想要的一个最小的padding。在上面的页面中,我们用constant(safe-area-inset-left)替换了padding-left: 12px。当我们回到竖屏时,左侧的安全区域变成了0px,而文本则紧靠屏幕边缘。

要解决这个问题,我们需要指定我们的padding应该是默认的padding或安全区域中较大的那个。这可以用全新的CSS函数min()max()来实现,这将在未来的Safari预览版本中提供相应的支持。两个函数都采用任意数量的参数,并返回最小值或最大值。它们可以在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()这个函数将会解析这个大小,以确保重要内容始终可见。

经验丰富的Web开发人员可能以前遇到过CSS锁(CSS Locks)机制,通常用于将CSS属性夹在特定范围的值中。一起使用min()max()会让事情变得更加容易,并且将有助于在未来实现有效的响应式设计。

反馈和问题

你现在可以使用Xcode 9中包含的iPhone X模拟器的Safari测试viewport-fit和安全区域。我们很乐意听到你采纳了所有这些特性,所以请随时将你的反馈和发现的问题发送到webevangelist@apple.com或者在Twitter上@WwebKit,并将你遇到的任何错误都提交到WebKit的bug跟踪器中

如果你有iPhone X相关的使用经验,欢迎在下面的评论中与我们一起分享。

特别声明,文章中所有示例,我已在Codepen中创建,如果你要看到对应的效果,请在Xcode9的模拟器中的Safari进行测试。如果你有真机,请将你用真机测试的结果反馈给我们。

扩展阅读

本文根据@Timothy Horton的《Designing Websites for iPhone X》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://webkit.org/blog/7929/designing-websites-for-iphone-x/

更新 2017.11.08

Webkit在iOS11中新增CSS Functions:env()替代constant(),文档中推荐使用env(),而constant()从Safari Techology Preview 41 和iOS11.2 Beta开始会被弃用。env()用法如同var(),在不支持env()的浏览器中,会自动忽略这一样式规则,不影响网页正常的渲染:

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

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.w3cplus.com/mobile/designing-websites-for-iphone-x.html

返回顶部