如何适配处理iphoneX底部的横条 - ios
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);
转载于:https://www.cnblogs.com/changxue/p/10562568.html
如何适配处理iphoneX底部的横条 - ios相关推荐
- 如何适配处理iphoneX底部的横条 ?(转)
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...
- 适配处理iphoneX底部的横条
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...
- 如何用CSS适配iPhoneX底部小横条
如何用CSS适配iPhoneX底部小横条 前言 iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理 ...
- iOS新版微信底部返回横条问题
之前没有怎么接触过微信开发,只是对H5比较熟.最近维护一个微信公众号的项目,遇到了iOS端返回键的坑. 描述一下: 从公众号打开页面后,底部有个返回的小横条,恰好也挡住了页面.这不行啊,得解决. 页面 ...
- iphone隐藏底条_iphone隐藏底部小横条,无需越狱
iphone更新的速度还是依然如此在每年的秋季发布会更新它的最新产品,跟新到现在已经为全面屏的机型,相比之前的屏幕尺寸,全面屏真的是很不错,虽然全面屏非常的出色,但也有很多小伙伴是不喜欢的,如上方的刘 ...
- uniapp兼容iPhoneX头部状态栏(刘海屏)和底部小横条
文章目录 (一)兼容 iphoneX 头部状态栏 方式一:封装状态栏组件 statusBar.vue 方式二:不封装组件 方式三:使用 Vuex 管理 完整demo展示: (二)兼容 iPhoneX ...
- Android全面屏导航栏高度,Android10全面屏开启底部手势横条,弹窗留白问题
public static boolean isShowNavBar(Context context) { if (null == context) { return false; } /** * 获 ...
- Unity中实现隐藏iPhoneX底部横条
一:前言 我们发布的游戏在iPhoneX之后的机型上默认会一直显示底部的横条,非常影响游戏体验并且不小心就会滑上去 二:解决办法 勾选上IOS的Player Settings中的Defer syste ...
- 如何用css适配iphoneX底部横条?!?
当我们在做app或者小程序的时候,如果是自适应屏幕高度,或者是用定位到底部按钮的时候,iphoneX底部的返回横条老是遮挡底部内容,如果巧妙的设计代码,使它能适配到iphoneX呢? 比如我写了一个底 ...
最新文章
- tomcat,JVM内存设置
- MASH结构相噪分析的simulink仿真
- 死锁发生的条件和预防
- C语言:编写一个程序,从键盘读入一个矩形的两个边的值(整数),求矩形面积
- 限制mysql资源使用率_MySQL--限制用户使用资源
- 算法设计与分析期末考试
- QT通过ODBC连接MySQL数据库
- ffmpeg实战教程(十二)为视频添加/更换背景音乐
- 华为(BGP路由技术)
- android小型app创意,创意无止境!17款让人脑洞大开的APP推荐
- 【DKN】(一)KCN详解
- 怎么修改SQL的密码?
- Python简易的HTTP服务器
- linux清理日志 hack,Linux系统的LOG日志文件及入侵后日志的清除
- python输出宽度是什么意思_Python输出长度
- 4k水面折射maya循环纹理支持arnold
- fiddler抓包工具:生成证书
- 内存或磁盘空间不足,Microsoft Office Excel 无法再次打开或保存任何文档 的处理方法...
- java ajax刷新,javaweb ajax刷新
- Hadoop中小文件过多的问题