原文地址：https://webkit.org/blog/7929/designing-websites-for-iphone-x/

开箱即用(开发者无需进行任何设置)，在iPhone X中，Safari 就可以完美的在全面屏上显示你既有的网站。网页内容会自动插入到显示的安全区域以至于不会被圆角和设备的传感器区域（刘海）遮挡。

插入区域会以在<body>或者<head>元素中定义的background-color为填充，从而与页面的其余部分相融合。对于大多数网站而言，这就足够了。如果你的页面仅仅包含文本和图像以及它们下面的背景颜色，默认的插入方式看起来就不错。

像下面那样的页面，特别是设计了100%屏幕宽度的水平导航条的页面，可以选择进一步去充分利用新屏幕的特性。iPhone X 人际交互指南详细介绍了一些要注意的一般设计原则，UIKit文档也提到了原生应用程序可以采用特定的机制来确保他们看起来不错。你的网站可以使用iOS 11 中新引入的几个WebKit API来充分利用iPhone X 屏幕的特性。

Safari 默认的插入方式。

让内容占据整个屏幕

第一个在 iOS 11 上使用的新功能是viewport-fit, 它是对现有viewport标签meta的扩展，它可以控制内容插入的方式。

viewport-fit默认为auto,这将导致上述自动排版行为。你可以将viewport-fit设置为cover来禁用该行为并使页面布局到屏幕的完整大小。 代码如下：

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

刷新之后，导航栏占据了整个屏幕的宽度，看起来顺眼多了。然而，你会发现页面的一部分被“刘海”遮住了，而且底部的导航条非常难用。这也是为什么我们要重视系统的安全插入区域。

使用viewport-fit=cover填充整个屏幕

重视安全区域

将viewport-fit=cover之后，为了使页面可用，我们必须选择性的给重要内容添加内填充以确保她们不会被屏幕的形状（刘海）遮住。这将使得一个页面可以充分利用 iPhone X 上增加的屏幕空间，同时动态调整以避免被角落，传感器外壳（刘海）和用于访问主屏幕的指示器遮住内容。

  • iPhone X 横屏下的安全区域和非安全区域，图中的标识为插距（插入距离）常量。*

为了实现上述效果，iOS 11 中的WebKit增加了一个名为constant()的新 CSS 函数 和四个预定义的常量, 它们分别是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()时请务必为每个样式添加 fallback。

重视安全区域，因此重要的的内容才不会被遮挡。

两全其美，max() & min ()

本节介绍 iOS 11中当前未包含的功能。

如果你在网站设计中采用了安全区域插入常数，你可能会注意到，除了安全区域插入之外，你还需要指定最小的内填充。在上面页面中，如果我们把12px的左填充换成constant(safe-area-inset-left)，当设备旋转回垂直方向时，左边的安全插入距离变成了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));

    }

}

使用@support做功能检测很必要，因为现在所有的浏览器杜不支持这两个函数，并且由于CSS对无效变量的处理，我们需要在@supports查询不确定是否支持的功能再去使用。

在我们的示例页面中，设备处于垂直方向时，constant(safe-area-inset-left)解析为0px,因此max()函数返回的是12px。在横屏时，由于存在“刘海”，max()函数返回的是较大的constant(safe-area-inset-left)，因此可以确保重要的内容总是在可视区域之内。

使用max()将安全区域插距与传统边距组合。

有经验的Web开发人员可能以前遇到过“CSS锁”机制，通常用于将CSS属性绑定到特定范围的值。min() 和 max() 一起使用使得这更容易，并将有助于实现有效的响应式设计。

iPhone X Web 设计的更多相关文章

  1. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  2. 苹果官方发布，iPhone 6 & Plus 设计素材

    苹果发布 iPhone 6 和 iPhone 6 Plus 有一段时间了,据说首日预定量达到了创纪录的1600万部,真是不可思议.苹果已经创建了一些指引,让开发者可以受益.他们已经发布了一组苹果官方的 ...

  3. [转]响应式WEB设计学习(3)—如何改善移动设备网页的性能

    原文地址:http://www.jb51.net/web/70362.html 前言 移动设备由于受到带宽.处理器运算速度的限制,因而对网页的性能有更高的要求.究竟是网页中的何种元素拉低了网页在移动设 ...

  4. [转]响应式WEB设计学习(2)—视频能够做成响应式吗

    原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...

  5. 响应性web设计实战总结

    响应性web设计实战 响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图 ...

  6. 什么是响应式Web设计？怎样进行？

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  7. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

  8. 《响应式Web设计实践》学习笔记

    原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...

  9. 学习之响应式Web设计---一个实例

    周末闲来无事,做了一个响应式设计的例子.当然,由此并不能窥见响应式设计真谛之一斑.但,对于初次接触响应设计,对于响应式设计的概念依旧模糊不清的同学来说,或许是个启蒙! 闲语暂且不表,进入正题,这里没有 ...

随机推荐

  1. 2018.11.03 NOIP模拟 树（长链剖分优化dp）

    传送门 考虑直接推式子不用优化怎么做. 显然每一个二进制位分开计算贡献就行. 即记录fi,jf_{i,j}fi,j​表示距离iii这个点不超过jjj的点的每个二进制位的0/10/10/1个数. 但直接 ...

  2. ac自动机板子

    hdu2222 #include<bits/stdc++.h> #define ll long long #define M 500005 using namespace std; int ...

  3. C的指针和数组

    int i; //定义整型变量i int *p; //定义一个指向int的指针变量p int a[5]; //定义一个int数组a int *p[5]; //定义一个指针数组,其中每个数组元素指向一个 ...

  4. IntelliJ IDEA 2017版 spring-boot2.0.4+mybatis反向工程;mybatis+springboot逆向工程

    一.搭建环境 采用IDE自动建立项目方式 然后,next next,配置导入依赖包 项目就生成了,在项目下导入配置文件GeneratorMapper.xml(项目结构如图所示) 配置文档,建立数据库和 ...

  5. 第20章：MongoDB-聚合操作--聚合管道--$unwind

    ①$unwind 在查询数据的时候经常会返回数组信息,但是数组并不方便信息的浏览,所以提供有“$unwind”可以将数组数据变为独立的字符串内容. 将文档中数组类型的字段拆分成多条,每条文档包含数组中 ...

  6. HDU 4310 Hero (贪心)

    题意:给定你有 n 个敌人,你的伤害是 1,给出每个敌人的伤害,和敌人的血量,每一回合你可以攻击一个敌人,并且所有敌人都会攻击你,除非它已经死了,问你最少要多少要消耗多少血量. 析:一个很明显的贪心问 ...

  7. JS如何创建对象

    js创建对象的方法很多,以下分别介绍

  8. ACtiveMQ中间件-消息的接收和发送

    一.发送消息基本步骤 (1)启动ActiveMQ的的activemq.bat批处理文件或BrokerService节点 (2)创建连接使用的工厂类ActiveMQConnectionFactory通过 ...

  9. Swift: 用Alamofire做http请求，用ObjectMapper解析JSON

    跟不上时代的人突然间走在了时代的前列,果然有别样的风景.首先鄙视一下AFNetworking.这个东西实在太难用了.不想封装都不行,要不写一大堆代码. NSURL *URL = [NSURL URLW ...

  10. 17、文件IO详解及实例

    上篇文章已经讲过了文件系统的一些基本的概念,这里首先对文件IO进行详细的学习,文件IO也称为系统调用IO,是操作系统为"用户态"运行的进程和硬件交互提供的一组接口,即操作系统内核留 ...