前端iPhone X适配总结
2024-09-04 01:46:49
屏幕尺寸
垂直方向上,iPhone X的显示宽度与iPhone 6,iPhone 7 和 iPhone 8 的 4.7 英寸一样,但是比4.7英寸的显示屏高145pt。
安全区域
安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响
viewport-fit
通过对meta标签viewport的扩展,可以调整页面的展现区域。viewport-fit有三个可选值:
contain:使页面展示在安全区域内。
cover: 使页面占满屏幕。
auto: 和 contain 选项表现一样
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离
safe-area-inset-bottom:安全区域距离底部边界距离
env() 和 constant()
因为之前使用的constant已经被弃用,所以需要我们向后兼容:
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
适配
1.设置网页在可视窗口的布局方式使页面完全覆盖整个窗口
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
只有设置了 viewport-fit=cover,才能使用 env()。
2. 页面主体内容限定在安全区域内
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
3. fixed 元素的适配
如果元素是fixed定位且bottom=0,那么除了设置body的padding-bottom还不够,还需要给它自身添加padding,因为它是相对于屏幕最底部定位的。
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
或者通过计算函数 calc 覆盖原来高度:
{
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
}
注意,这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。
如果元素是fixed定位且bottom不等于0,则只调整位置就可以了,增加margin-bottom或者改变bottom。
参考
最新文章
- C++ STL--stack/queue 的使用方法
- linux下重启tomcat,日志查看
- OKR——Objectives and Key Results
- apache url rewrite 的RewriteRule参数详解
- apache高负载性能调优
- HCE基础知识
- 根据用户输入的二代身份证号码自动为其计算生成出生日期的javascript方法
- 动态调用webservice 接口
- ACM 中常用的算法有哪些? 2014-08-21 21:15 40人阅读 评论(0) 收藏
- CSS的“层叠”规则的总结
- GL应用方面
- Modis 陆地产品格网
- cgroup原理简析:vfs文件系统
- JVM类加载以及执行的实战
- Go语言中的Iota
- python chrome的自定义启动
- Shell脚本笔记(二)Shell变量
- 数据库更新锁WITH UPDLOCK
- Scaled Exponential Linear Unit
- .NET Core微服务之路:基于gRPC服务发现与服务治理的方案
热门文章
- 實現QQ第三方登錄
- redis 小结三-数据类型
- 深入理解java虚拟机(3)垃圾收集器与内存分配策略
- Docker下载镜像出现failed to register layer: symlink....问题
- 【vsCode】识别.vue/一键生成.vue模板文件
- inittab - 与 sysv 兼容的 init 进程使用的初始化文件格式
- laravel5.8 Models
- SpringBootMVC02——SpringDataJpa与ThymeLeaf
- 在centos7.5使用DockerFile构建镜像时报错“Error parsing reference: ";microsoft/dotnet:2.2-aspnetcore-runtime AS base"; is not a valid repository/tag: invalid reference format”
- CodeForces-721C-Journey(DAG, DP)