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旋转动画实例代码
Sep 11 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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
一个显示天气预报的程序
2006/10/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
js操作二级联动实现代码
2010/07/27 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
React组件之间的通信的实例代码
2017/06/27 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
小程序实现多列选择器
2019/02/15 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python实现简单加密解密机制
2019/03/19 Python
Python类的动态绑定实现原理
2020/03/21 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
心得体会开头
2014/01/01 职场文书
医药个人求职信范文
2014/01/29 职场文书
调解员先进事迹材料
2014/02/07 职场文书
品质保证书格式
2015/02/28 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python