js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
类别:Web前端 浏览量:1752
时间:2021-09-30 00:45:22 js如何解决iphone异形屏适配
Html5适配iphoneX刘海屏的简单实现iphonex的刘海屏且不说好看不好看,但是确实给开发造成一定困扰,有些PM希望产品能够全屏展示,于是客户端就把刘海以上的空间让出来让前端处理,造成一个问题就是当页面头部固定在顶部时,如果上下滑动页面会有较大缝隙出现,如果背景全是白色还好,否则跟断层了似的,非常难看。
iphone屏幕尺寸
iphoneX与其他机型尺寸上的差异
导致上述问题的原因就是iphoneX存在安全区域,安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:
也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内。
具体尺寸,详见Human Interface Guidelines – iPhoneX
如何适配?
第一步,设置网页在可视窗口的布局方式
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>
iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:
- contain: 可视窗口完全包含网页内容(左图)
- cover:网页内容完全覆盖可视窗口(右图)
- auto:默认值,跟 contain 表现一致
注意:网页默认不添加扩展的表现是 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函数替代
默认情况下,如果客户端处理了安全区域,效果如下:
使用全面屏viewport-fit=cover属性后:
安全区域图:
限定安全区域后效果图:
上面设置了padding为12像素,如果旋转方向后:
第三步,使用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)); } }
fixed元素固定问题
如果页面title是前端实现的,且固定在顶部,就会出现被遮挡的情况,这时候可以设置top值为安全距离值,比如:
.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}
参考文章:Designing Websites for iPhone X
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- html5基本标签详解(HTML5 通过Vedio标签实现视频循环播放的示例代码)
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- html5循环及条件指令(html5实现滑块功能之type="range"属性)
- html5 web技术(html5视频常用API接口的实战示例)
- HTML5面试题
- html5书写规范教学(Html5踩坑记之mandMobile使用小记)
- html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- html5所有特性(HTML5 FileReader对象的具体使用方法)
- html5播放代码(html5 video全屏播放/自动播放的实现示例)
- html5发送文字特效(HTML5调用手机发短信和打电话功能)
- h5实现弹出悬浮窗(Html5监听手机摇一摇事件的实现)
- html5支持video的视频格式(解决html5中的video标签ios系统中无法播放使用的问题)
- 如何获取html5表单中的元素的值(html5 datalist 选中option选项后的触发事件)
- html5+css3动画效果图(纯DOM+CSS3实现简单的小风车动画)
- html5做app流程(html5唤醒APP小记)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
热门推荐
- pythondjango工作机制(Python后台开发Django会话控制的实现)
- django菜单动态生成(django富文本编辑器的实现示例)
- SQL SERVER存储过程中使用事务与try catch
- laravel服务器设置教程(laravel框架模型、视图与控制器简单操作示例)
- linux编写ftp程序(Linux实现文件上传ftp服务器脚本代码)
- 服务异常处理方案(网站出现Service Unavailable提示怎么解决?)
- sql语句中的join(SQL语句中不同的连接JOIN及join的用法)
- pythonsvr时序预测(利用Python半自动化生成Nessus报告的方法)
- js弹出框代码(js实现自动锁屏功能)
- jquery中unbind、bind
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9