如何适配处理iphoneX底部的横条 ?
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条“Home Indicator”。当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适配解决呢?
第一步:
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>
第二步:
页面主体内容限定在安全区域内,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况
body { padding-bottom: env(safe-area-inset-bottom); }
第三步:
fixed 元素的适配
第一种:padding-bottom: env(safe-area-inset-bottom);
注意元素是否设置box-sizing:border-box;否则不起作用,道理就不说了。
第二种:height: calc(60px(假设值) + env(safe-area-inset-bottom));
第三种:margin-bottom: env(safe-area-inset-bottom);
这三种方式都可解决,视情况而定选择合适的,也可以灵活为fixed 元素的子元素添加这些属性
使用 @supports
一般只希望 iPhoneX 才需要新增适配样式,可以配合 @supports 编写样式:
@supports (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: env(safe-area-inset-bottom);
}
}
下面是一些拓展知识点:
1.iphoneX业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,所以需要对iphonx 适配
<meta name="viewport" content="viewport-fit=contain">
<meta name="viewport" content="viewport-fit=cover">
<meta name="viewport" content="viewport-fit=auto">
viewport-fit:
contain: 可视化窗口完全包含网页内容
cover: 网页内容完全覆盖
auto: 默认值和 contain 一样
2.ios11 增加新特性,webkit 的 css 函数
四个预定义变量为设定安全区域和边界的距离,如下:
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离;在刘海全屏的时候 top 为 44px
safe-area-inset-bottom:安全区域距离底部边界距离;刘海全屏的条件下是 34px
css 函数 env() 和 constant()
上面两个函数可以直接使用变量函数,只有在 webkit 内核下才支持
env() 必须在 ios >= 11.2 才支持
constant() 必须 ios < 11.2 支持
env 和 constant 只有在 viewport-fit=cover 时候才能生效
兼容前后版本,例子:
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
- 游戏服务器之内存数据库redis客户端应用(下)
- 使用Python和Tesseract来识别图形验证码
- 高并发服务器的设计--连接池的设计
- Pwnable.tw刷题之Silverbullet破解过程分享
- 鸡肋CSRF和Self-XSS组合的变废为宝
- 简易--go语言redis连接池
- Golang中channel使用的一些小技巧
- Go语言的管道Channel用法实例
- 【数据库】MySQL进阶二、索引简易教程
- 【数据库】MySQL进阶六、模糊查询用法
- 【选择题】Java基础测试九(16道)
- 用Ansible自动供应vmware虚拟机--构建数据中心一体化运维平台第二篇
- 【编程题】Java编程题五(10道)
- 如何有效地对Docker的镜像进行管理?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode | 141.环形链表
- LeetCode | 20.有效的括号
- springboot开发之实现登录功能
- springboot开发之国际化(中英文切换)
- LeetCode | 225.用队列实现栈
- springboot开发之显示员工信息
- LeetCode | 232.用栈实现队列
- springboot开发之thymeleaf页面公共元素的抽取
- Redis | Redis 通用命令
- python爬虫--自动下载cosplay小姐姐图片(xpath使用自定义创建文件路径)
- springboot开发之修改员工
- LeetCode | 703.数据流中的第K大元素
- springboot开发之配置自定义的错误界面和错误信息
- springboot开发之删除员工
- LeetCode | 1.两数之和