Html5适配iphoneX刘海屏的简单实现


Posted in HTML / CSS onApril 09, 2019

iphonex的刘海屏且不说好看不好看,但是确实给开发造成一定困扰,有些PM希望产品能够全屏展示,于是客户端就把刘海以上的空间让出来让前端处理,造成一个问题就是当页面头部固定在顶部时,如果上下滑动页面会有较大缝隙出现,如果背景全是白色还好,否则跟断层了似的,非常难看。

iphone屏幕尺寸

Html5适配iphoneX刘海屏的简单实现

Html5适配iphoneX刘海屏的简单实现

iphoneX与其他机型尺寸上的差异

Html5适配iphoneX刘海屏的简单实现

导致上述问题的原因就是iphoneX存在安全区域,安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:

Html5适配iphoneX刘海屏的简单实现

也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内。

具体尺寸,详见Human Interface Guidelines – iPhoneX

如何适配?

第一步,设置网页在可视窗口的布局方式
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>

iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

  • contain: 可视窗口完全包含网页内容(左图)
  • cover:网页内容完全覆盖可视窗口(右图)
  • auto:默认值,跟 contain 表现一致

Html5适配iphoneX刘海屏的简单实现

注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。
具体详见:The viewport-fit descriptor
第二步,页面主体内容限定在安全区域内
.post {
    padding: 12px;
    padding-left: env(safe-area-inset-left);
    padding-left: const(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-right: const(safe-area-inset-right);
}

constant 函数

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离
注意:部分浏览器已经不支持constant函数,用env函数替代

默认情况下,如果客户端处理了安全区域,效果如下:

Html5适配iphoneX刘海屏的简单实现

使用全面屏viewport-fit=cover属性后:

Html5适配iphoneX刘海屏的简单实现

安全区域图:

Html5适配iphoneX刘海屏的简单实现

限定安全区域后效果图:

Html5适配iphoneX刘海屏的简单实现

上面设置了padding为12像素,如果旋转方向后:

Html5适配iphoneX刘海屏的简单实现

第三步,使用min()和max()方法
@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

Html5适配iphoneX刘海屏的简单实现

fixed元素固定问题

如果页面title是前端实现的,且固定在顶部,就会出现被遮挡的情况,这时候可以设置top值为安全距离值,比如:

.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}

参考文章:Designing Websites for iPhone X

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
html5唤醒APP小记
Mar 27 #HTML / CSS
html5录音功能实战示例
Mar 25 #HTML / CSS
浅析HTML5中的download属性使用
Mar 13 #HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 #HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 #HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 #HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 #HTML / CSS
You might like
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
vue+iview写个弹框的示例代码
2017/12/05 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
python中的五种异常处理机制介绍
2014/09/02 Python
Python利用ansible分发处理任务
2015/08/04 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
python flask实现分页效果
2017/06/27 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
如何学习Python time模块
2020/06/03 Python
pandas分批读取大数据集教程
2020/06/06 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python中判断文件结束符的具体方法
2020/08/04 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
eBay加拿大站:eBay.ca
2019/06/20 全球购物
森林防火工作方案
2014/02/14 职场文书
优秀学生获奖感言
2014/02/15 职场文书
2015年安全生产责任书
2015/01/30 职场文书