[译] iPhone X 网页设计

本文讲的是[译] iPhone X 网页设计,

在最新发布 iPhone X 的全面屏上,Safari 可以精美地显示现有的网站。内容自动嵌入到显示屏的安全区域内,以免被圆角、原深感摄像头系统的空间遮挡住。

凹槽部分填充了页面的 background-color (比如指定为 <body> 或 <html> 元素的背景颜色),这样就和页面其余部分混合在一起。对于许多网站来说,这已经足够了。如果你的页面在背景色上只有文本和图片,那么默认的凹槽部分看起来也非常不错。

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

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

Safari's default insetting behavior

Safari 的默认内嵌行为。

使用整个屏幕

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

viewport-fit 的默认值是 auto,会引起自动嵌入行为的效果。为了使该行为失效,并使页面全屏幕显示,你可以设置 viewport-fit:cover 为 cover。在这样做之后,我们的 viewportmeta 标记看起来像这样:

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

重新加载后,导航栏显示成边缘到边缘的样子,看起来好多了。然而,很明显,为什么注意系统的安全区域内嵌很重要:一些页面的内容被原深感摄像头系统的空间遮挡了,而底部的导航栏非常难以使用。

viewport-fit=cover

用 viewport-fit=cover 适配全面屏.

注意安全区域

为了在采用 viewport-fit=cover 之后页面还可用,下一步要做的是选择性地给包含重要内容的元素加上 padding,以确保元素不会被屏幕的形状所遮挡。生成的页面会充分利用 iPhone X 上增加的屏幕空间,同时动态调整避免四个角落、原深感摄像头系统的空间靠近主屏幕。

Safe and Unsafe Areas

iPhone X 横屏时的安全区和非安全区(带默认内嵌数值)

为了实现这一点,iOS 11 中的 WebKit 新增了一个 CSS 函数constant(),以及一组 四个预定义的常量: safe-area-inset-leftsafe-area-inset-rightsafe-area-inset-top 和safe-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() 的样式将被忽略。因此,重要的是要对使用 constant() 的样式另外使用替代样式。

Safe area constants

注意安全区内嵌,使重要内容可见。

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

本节介绍目前 iOS 11 还没有实现的特性。

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

No margins

安全区域内嵌不能替代边距。

要解决这个问题,我们需要指定 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) 解析为 0 px,因此 max() 解析为 12 px。横屏时,由于感应器空间的存在,设置 constant(safe-area-inset-left) 的值会变得更大,而 max() 这个函数将会解析这个大小,以确保重要内容始终可见。

max() with safe area insets

max() 将安全区内嵌与传统边距结合

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

反馈和问题

现在你可以在 Xcode 9 中 iPhone X 模拟器的 Safari 开始采用 viewport-fit 和安全区内嵌。很乐意听到所有特性被采纳,请随时将反馈和问题发送到 web-evangelist@apple.com 或者在 Twitter 上 @webkit,并将 bug 都提交到 WebKit 的 bug 跟踪器






原文发布时间为:2017年10月17日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-09-19 23:02:25

[译] iPhone X 网页设计的相关文章

5大移动网页设计之最佳实践

本文来自SocialBeta内容贡献者wisp,原文译自Mobile Web Design: Best Practices,更多移动产品设计方面的资料,请查看SocialBeta移动互联网栏目. 移动设备的兴起正在给互联网带来一场新的革命,虽然说移动网页设计原则不会有多大变化,但是却有着明显的区别. 至少有一点是截然不同的,目前移动设备的网络速度可比不上宽带,另外移动网页呈现方式也是多样的,有触摸屏,有上网本,这些小屏幕却貌似巨人! 可能有些人会认为移动化其实根本没必要,但是几乎所有人都得承认这

移动网页设计概要、案例和技巧

本文由SocialBeta内容贡献者wisp译自Mobile Web Design: Overview, Examples and Tips,由于专业所限,翻译中难免有一些错误,请广大读者指正,谢谢. 移动界面设计正越来越流行,几乎每个主流网站或者网络服务提供商或者web app都会有手机应用版.因此从业人员迫切需要学习移动网页设计的相关知识.本文不仅会介绍移动网页设计的趋势,还提供一些优秀的设计案例,从中让读者得到一些启发.什么是移动网页(mobile web)设计? 在开始设计移动网页之前,

23个最具影响力的网页设计博客

  CSS-Tricks CSS-Tricks是Chris Coyier公众博客,专门讲一些有关CSS的话题.不过近几年来,CSS-Tricks有了下面一些扩展: Chris和Dave Rupert一起创造了ShopTalk 播客,在里面可以讨论所以有关网页设计和开发的事情. Chris 出过几本书,做了一个 Lynda.com的Wordpress主题课程,并且他还创建了一个The Lodge的课程教人们学习如何制作一个颇具现代感的网站. 超多很酷的项目,像 CodePen,HTML-Ipsum

响应式网页设计:很全的响应式网页设计教程

文章描述:响应式网页设计考虑到多平台.多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验. 响应式设计现在已经成为网页设计师学习的焦点.网页教学网发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多.你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎么能不对它进行了解呢? 响应式网页设计考虑到多平台.多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验.当你不知道用户使用什么设备,不知道用户的屏幕尺寸时,若想达到较优布局,可以采用响应式设计.在进行响应式

响应式网页设计和移动互联网

文章简介:响应式网页设计被提出以来,争论就不断,其实核心问题只有两个个:太多的资源请求和有限的终端支持之间的矛盾.响应式的网页设计和移动终端在用户体验和视觉风格上的差异. 个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT. 移动互联网的现状和未来 在说到这个话题前,我们先看下网页设计和前端开发的现状: 全球有超过53亿手机

网页设计实例分析:日式网页设计案例分析

文章描述:在很多人眼里,日本是一个隐忍.充满禅意的国家.以寺庙.茶道.电子产品而闻名.既传统,又现代.日本的建筑设计.书刊设计受世界瞩目.但是不知怎么的,日本的网页设计风格很怪异.有点像1998年的网页风格. 在很多人眼里,日本是一个隐忍.充满禅意的国家.以寺庙.茶道.电子产品而闻名.既传统,又现代.日本的建筑设计.书刊设计受世界瞩目.但是不知怎么的,日本的网页设计风格很怪异.有点像1998年的网页风格. Rakuten NicoNicoDouga Gigazine 看看日本这些最流行的网站(比

网页设计技巧:使用模糊的背景进行漂亮的网页设计

文章描述:网页设计中的模糊背景. 全尺寸背景在网页设计中已经越来越受欢迎,几年来,这一趋势的另一个变化是模糊的背景图像. 最近似乎有更多的模糊背景设计雨后春笋般冒出来,在使用某种类型的模糊图像的大背景下或者一个全尺寸的背景,不仅让整个网站下显得非常的人性化,烘托出网站所要给用户的氛围,也能更够突出产品或者人物本身特质,在配合新的CSS技术的情况下 更能到给用户舒适的用户体验! 有多种不同类型的网站使用这种方法,有许多非常好的的设计,这种风格,我们已经看到许多Web应用程序或iPhone应用程序.

网页设计:CSS3、HTML5、JS和框架

文章描述:网页设计:CSS3.HTML5.JS和框架.  如今大热的HTML5到底美在哪里?HTML5到底能为实际的移动开发带来哪些改变?来自阿里云云手机服务运营部的前端开发工程师分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从CSS.JavaScript和框架三个方面做了细致讲解.说到HTML5一般都会提到它新增了一些新的标签,这些标签能够减少文档的大小,也可以节省一些CSS定义,但是这个好处不足以说明HTML5在技术变革上带来的影响,我们还是先要明白HTML5的原理到底是怎样的

网页设计趋势:更清晰的思路创意和想象网页设计

文章描述:那么今天我们就给2012年的网页设计趋势有一个分析和美好的猜想,希望能和大家一起在新的一年里有一个更清晰的思路去创意和想象,去启发更多的可能. 人们一直念叨的2012年终于来了.人们也从开始的激动到现在的平复,时间确实可以平息一切.我们看着科技的进步,看着网络在每一天的改变着生活方式,看着不断的创新科技在装点着生活,这个时候我们确实有速度感.在这崭新的2012年里,网络会发生什么样的变化谁都不能肯定.但是大家都会有一个美好的猜想.因为过去的几年网络改变太多人的命运,甚至改变很多国家的命