html5简单iphoneX刘海屏适配的方法

发布时间:2022-02-22 14:57:09 作者:iii
来源:亿速云 阅读:209

这篇文章主要介绍“html5简单iphoneX刘海屏适配的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html5简单iphoneX刘海屏适配的方法”文章能帮助大家解决问题。

如何适配?

第一步,设置网页在可视窗口的布局方式
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>

iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

注意:网页默认不添加扩展的表现是 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 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

注意:部分浏览器已经不支持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刘海屏适配的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. iphone刘海屏页面适配的示例分析
  2. 如何适配iPhoneXS max和iPhoneX R

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:HTML的文本标签有哪些及怎么用

下一篇:html怎么加载live server插件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》