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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 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 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
php数组指针操作详解
2017/02/14 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python3.5 tkinter实现页面跳转
2018/01/30 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
医学毕业生自荐信
2013/10/11 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
大学生实训报告总结
2014/11/05 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
教师学习心得体会范文
2016/01/21 职场文书