适配iPhone X 的齐刘海

当苹果宣布发布他们的旗舰手机-- iPhone X 的时候,他们允诺将为未来移动设备设定新的标准。我们决定需要了解一些内容。

“屏幕再也不必是方形的”

除了无边框设计,就是我们熟悉的“齐刘海”,官方叫:Sensor Housing。它迅速成为一个热门话题,提出了一种全新的设计挑战:屏幕再也不必是方形的。虽然这对原生应用是一个更大的考验,但web开发也需要一些考虑。不管它是吓到你或者激发了你, sensor housing 都已存在。现在是为你的客户提供一种非常整洁体验的绝佳机会,即使他们可能不会期待。

起初我以为会需要做好多工作,很像当我第一次学习 CSS media queries 时--但一旦你学过一些新 CSS 属性后,就会变得简单。事实上,适配 Sensor Housing 很简单,接下来我将教你。

有Mac电脑,可以下载一个模拟器,如果你有真机就更好了!

问题:

当 iPhone X 被旋转为横向时,设备左右可得到的内容区域是不一样的,这是因为需要取决于设备的绝对方位和 sensor housing 的位置,你站点内容竖直方向的安全区域在15px 或 45px。我们的数据显示有 5%-10%的 iPhone X 用户使用横屏,或许是因为屏幕大,或许是因为关于 sensor housing 高涨的讨论导致想看看会出现什么情况,但我很高兴他们能看到一个适应良好的网站。

iOS 的解决方案是两边留白以确保内容都可见。这是一个足够好的解决方案,但幸运的是苹果给了一些额外的特性以此来帮助网站充分利用无边框的优势。

两个要素:

有2个基础的要素来调节 iPhone X 的 sensor housing:

1. 一个新的 viewport meta content 值

2. 四个新的 padding 属性值

Viewport meta 内容:

在 <head> 中找到 viewport ,然后在 content 最后加上:viewport-fit=cover.

<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"

这就是告诉 Safari 丢弃左右留白允许站点内容展示到边框。这时一些内容就会被遮挡在 sensor housing 凹槽下面。我们必须设置一些智能的 padding 值,以使内容可见。

CSS:

我们希望为被 sensor housing 遮挡的元素设置 padding 值。足够友好的是,苹果已经提供了一个CSS 方法和一些预定义的CSS 变量,来应对这重担: env() 和 safe-area-inset-*。

因为 env() 仅在 iOS 11.2+设备上可用,所以目前你依旧需要引入 constant() 作为回退方案。iOS 11.2 好像一直也会支持 constant(),但依旧建议都引入。

代码如下:

  1. .container {
  2. /* Fallback */
  3. padding:0 10px;
  4. /* iOS 11 */
  5. padding-left: constant(safe-area-inset-left);
  6. padding-right: constant(safe-area-inset-right);
  7. /* iOS 11.2+ */
  8. padding-left: env(safe-area-inset-left);
  9. padding-right: env(safe-area-inset-right);
  10. }

你需要实验以此来发现最适合设置这些样式的地方,多数要依赖你的设计来决定。在我们的例子中,我们使背景填充整个屏幕但使内容约束到安全区域,所以我们在内部元素的 containers 上应用了 padding。

提示:

使用Safari的开发者工具,检测这个元素:

  1. .container {
  2. /* env() for iOS 11.2+, otherwise constant() */
  3. padding-top: env(safe-area-inset-top);
  4. padding-right: env(safe-area-inset-right);
  5. padding-bottom: env(safe-area-inset-bottom);
  6. padding-left: env(safe-area-inset-left);
  7. }

结果:

在合适的地方设置你的padding之后,你已为你的用户转变了体验:从“压扁适应”到“量身定制”!看着是不是很漂亮?

webkit.org 官网提供了一些 min() 和 max() 配合 env() 以此来适应更复杂的布局。

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2017-11-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

如何转行小程序开发?不同品种的程序员该这样做

1382
来自专栏杨建荣的学习笔记

React技术初识

前端框架哪家强,如果没理解错,应该是React,Angular,VUE。记得去年的时候,和我一个老同学聊天,他是一个架构师,偏向于后端开发,但是发现他已...

1053
来自专栏IT大咖说

手淘互动动效的探索

摘要 现在的营销活动,用一张简单的图片去吸引消费者已经远远不够,必须要有能给消费者带来视觉冲击的东西,或者在动画过程中提供更好的引导部分。手淘的前端团队经历了从...

4668
来自专栏较真的前端

前端学习——这十本书一定要看

2796
来自专栏it知识分享

web前端程序员需要会那些技能?

  黑马程序员为大家分享web前端学习6大技术知识点,希望可以在今后的学习中帮到找到重点,以及学习的主次之分。

1495
来自专栏happyJared

工程师文化:Chrome快捷键

  我工作时间不长,加上实习至今(2018.07)也就一年;我没进过大厂,也就意味着没有接受过正规的系统培训;这条路我走着普通的不能再平凡,没感受过优秀的工程师...

913
来自专栏九彩拼盘的叨叨叨

前端学习

前端主要包括 HTML,CSS,JavaScript。开始的时候,可以看熟悉下基本概念

964
来自专栏BestSDK

教你做出一款清丽脱俗的Ui图标

视觉内容的重要性 随着移动互联网的高速发展,人们往往被各类各样的信息与数量庞大的内容所淹没。因此,人们的注意力也变得极难捕捉起来,但是可以确认的是,视觉内容广告...

3445
来自专栏儿童编程

“心中有剑,落叶飞花,皆是兵器”-Python动画原理揭示及案例

“心中有剑,落叶飞花,皆是兵器”是武侠世界中武功的超高境界。这句话用来形容Python动画也是非常合适的。从最原始的手工动画到现在的好莱坞动画大片,动画原理都一...

2632
来自专栏程序人生 阅读快乐

《HTML5 canvas开发详解(第2版)》富尔顿 等(作者)epub

随着Canvas的持续升温,Flash的光芒迅速消退。本书是Canvas的畅销图书,它在上一版的基础上,通过讲解如何开发可交互式多媒体应用,引导读者学习HTML...

1502

扫码关注云+社区

领取腾讯云代金券