zoukankan      html  css  js  c++  java
  • Web移动端---iPhone X适配(底部栏黑横线)

    一、相信大家有被iPhone X底部黑色横线支配的恐惧

      上面我们可以看到,底部的导航栏被一条黑色横线所盖住,那么就很烦。下面我们可以开始进行适配环节

     1、首先我们可以用 JS 判断手机环境是不是 iPhone X 代码如下

    if (/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)) {
    //是iphoneX
    console.log('是iphonex')
    } else {
    //不是iphoneX
    console.log('不是iphonex')
    }

       2、也可以 CSS 判断 代码如下:

      媒体查询

    @media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        .mint-tabbar, .closeBookList, .BottomProgress {
            padding-bottom: 34px !important;
        }
    }

      因为iPhone X 底部横线距离最底部的高度为34px 所以我们增加一个padding-bottom:34px !importan; 提升样式优先权

      3、下面写出我的例子:

      因为我是在 Vue项目中 用到scss 

      

    <style lang="scss" scoped>
        @media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        .mint-tabbar, .closeBookList, .BottomProgress {
            padding-bottom: px2rem(34) !important
        }
    }
    </style>

    这里的 mint-tabbar 是我底部导航栏最父级的 类名,你们要哪部分适配就写哪部分的样式类名

     

  • 相关阅读:
    用nginx转发请求tomcat 如何配置访问日志获取真实ip
    jquery扩展方法(extend) 写法
    android binder机制
    rails nginx passenger postgre 在ubuntu部署
    ssh 免密码登陆
    佛山 开发者 程序员 ios 安卓 外包团队
    佛山程序猿交流群
    IOS开发 僵尸调试
    关于产品设计的功能
    android 视图(view)置顶
  • 原文地址:https://www.cnblogs.com/mica/p/10688357.html
Copyright © 2011-2022 走看看