您好,登录后才能下订单哦!
这篇文章主要介绍“html5简单iphoneX刘海屏适配的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html5简单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,这是适配的关键步骤。
第二步,页面主体内容限定在安全区域内
.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函数替代
上面设置了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);}
关于“html5简单iphoneX刘海屏适配的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。