iPhoneX理发指南

iPhoneX的正面几乎都是屏幕,除了一块齐刘海(sensor housing)来放置前置摄像头和一些传感器。为了让全屏的网页在iPhoneX上有比较好的浏览效果,必须保证布局的内容不被iPhneX的四角的圆角屏幕以及刘海遮挡,除此之外,还要尽量避免让有交互的区域固定在嘴巴上(home indicator)。
如下图所示在iPhoneX全屏模式下打开v2ex社区,其导航头被状态栏遮住,体验不是很好。

为了让UI布局完全处于可见区域,苹果提出了一种安全区的概念(Safe Area),如下图所示,苹果建议开发者把布局限制在安全区内。要想网页在iPhoneX上的内容处于安全区,当然有两种方案,一种是通过js实现,检测设备类型,如果是iPhoneX就设置不同的样式,但是这种方案需要写js代码,还会产生重新重绘或回流,性能比较差。最好的方案当然是直接通过CSS控制。

幸运的是,苹果给出了很好的解决方案。ios11支持viewport-fit
属性,用于设置网页在可视窗口的布局方式,可设置三个值:
- contain: 可视窗口完全包含网页内容(如下上图)
- cover:网页内容完全覆盖可视窗口(如下下图)
- auto:默认值,跟 contain 表现一致(默认)
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
当网页设置viewport-fit=cover
时,ios11 WebKit内核支持如下的一些预定义的常量safe-area-inset-*
safe-area-inset-left:安全区左边距
safe-area-inset-right:安全区右边距
safe-area-inset-top:安全区顶部边距
safe-area-inset-bottom:安全区底部边距
这些预定义常量可以应用在margin、padding、top、left、width、height
等可以设置尺寸的样式属性上,我们只需要把它当成一个已知的常量看待,甚至可以参与calc()函数的计算。使用时需要结合env
函数。
如:
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
注意
- 只有当
viewport-fit-cover
时env
函数才会起作用的。对于不支持env
的浏览器,浏览器将会忽略它。 - 另外还需要说明的是ios11刚发布时并不支持标准的
env
的函数,而是constant
函数,在ios11.2时constant
函数被移除,换成了标准的env
函数,实际上影响的用户应该很少,换了新手机的人当然喜欢升级系统了。如果不放心的话可以同时添加两条css
语句,因为浏览器对于不支持的css
的语句会直接忽略,但是要最好把constant
函数语句放在前面。 - 在非iPhoneX的ios11设备上上面的值为0,不会影响网页在其他设备上的布局。
有了上面的基础,我们可以轻易给v2ex的网站适配一下iPhoneX
:给meta
标签添加viewport-fit=cover
,body
标签的padding
设置
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

参考资料
Designing Websites for iPhone X
Removing the White Bars in Safari on iPhone X
iPhoneX理发指南的更多相关文章
- 高质量C++/C编程指南(林锐)
推荐-高质量C++/C编程指南(林锐) 版本/状态 作者 参与者 起止日期 备注 V 0.9 草稿文件 林锐 2001-7-1至 2001-7-18 林锐起草 V 1.0 正式文件 林锐 20 ...
- 关于H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 关于H5页面在iPhoneX适配(转)
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 高质量C++/C编程指南
http://man.chinaunix.net/develop/c&c++/c/c.htm#_Toc520634042 高质量C++/C编程指南 文件状态 [ ] 草稿文件 [√] 正式文 ...
- Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板)
Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...
- iPhoneX页面安全区域与内容重叠问题
转载自:https://www.cnblogs.com/lolDragon/p/7795174.html 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iP ...
- IphoneX适配正确姿势
IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator) ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- UE4新手之编程指南
虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程. 新的游戏类.Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写,并且在使用Visual Studio 或 ...
随机推荐
- C# 数组、HashSet等内存耗尽的解决办法
在C#中,如果数据量太大,就会出现 'System.OutOfMemoryException' 异常. 解决办法来自于Stack Overflow和MSDN https://docs.micro ...
- vue脚手架工具
1.安装node.js 2.安装vue-cli npm install vue-cli -g vue -V(-V大写)查看版本信息 3.安装webpack 4.初始化项目 vue init webpa ...
- js 实现数据结构 -- 队列
原文: 在 Javascript 中学习数据结构与算法. 概念: 与栈相反,队列是一种遵循先进先出 (FIFO / First In First Out) 原则的一组有序的项:队列在尾部添加新元素,并 ...
- scrapy之使用LinkExtractor提取链接
一.概述: 在页面含有少量链接时,使用selector来提取信息就可以,但如果链接特别多时,就需要用LinkExtractor来提取. 二.LinkExtractor构造器的各个参数: 1.allow ...
- mysql数据库建表的基本规范
1.创建表的时候必须指定主键,并且主键建立后最好不要再有数据修改的需求 mysql从5.5版本开始默认使用innodb引擎,innodb表是聚簇索引表,也就是说数据通过主键聚集( 主键下存储该行的数据 ...
- Vue+koa2开发一款全栈小程序(9.图书详情页)
1.获取图书详情 1.修改server/controllers/bookdetail.js为 const {mysql}=require('../qcloud') module.exports=asy ...
- svn客户端更改用户名
你是用的小乌龟做客户端吗?在文件夹里点右键,选择TortoiseSVN->Setings->SavedData里面有个authentication data,点击后面的Clear就好了下次 ...
- 基于USB网卡适配器劫持DHCP Server嗅探Windows NTLM Hash密码
catalogue . DHCP.WPAD工作过程 . python Responder . USB host/client adapter(USB Armory): 包含DHCP Server . ...
- Kubernetes之ServiceAccount
ServiceAccount 是什么 Service Account为Pod中的进程和外部用户提供身份信息.所有的kubernetes集群中账户分为两类,Kubernetes管理的serviceacc ...
- 分布式监控系统开发【day38】:主机存活检测程序解析(七)
一.目录结构 二.入口 1.文件MonitorServer.py import os import sys if __name__ == "__main__": os.enviro ...