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的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 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使用smtp发送支持附件的邮件示例
2014/04/13 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
javascript中的this详解
2014/12/08 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
python制作最美应用的爬虫
2015/10/28 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Django实现分页显示效果
2019/10/31 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
会计专业的自荐信
2013/12/12 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
教师对学生的寄语
2014/04/03 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript