适配处理iphoneX底部的横条

iphoneX手机取消了实体Home键，取而代之的是主界面底部不显眼的横条“Home Indicator”。当网页底部fixed 元素时候，一部分元素可能就被这个横条遮挡住，怎么适配解决呢？

第一步：

　　第二步：

　　　　页面主体内容限定在安全区域内,如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况

　　　　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);
　　　　　　}
　　　　}

转自 http://www.manongjc.com/article/76141.html

适配处理iphoneX底部的横条相关推荐

如何适配处理iphoneX底部的横条？(转)
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条"Home Indicator".当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适 ...
如何适配处理iphoneX底部的横条 - ios
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呢? 比如我写了一个底 ...

适配处理iphoneX底部的横条

适配处理iphoneX底部的横条相关推荐

最新文章

热门文章