一、相信大家有被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-width: 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-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.mint-tabbar, .closeBookList, .BottomProgress {
padding-bottom: px2rem(34) !important
}
}
</style>

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

Web移动端---iPhone X适配(底部栏黑横线)的更多相关文章

  1. 移动端iPhone系列适配问题的一些坑

    完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...

  2. 移动端iPhone系列适配问题

    问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appear ...

  3. web移动端rem的适配

    ** 需求: 随着移动端设备的变化,内容也跟着变化.**先来说说rem单位,以rem为单位,其大小是根据根元素(html标签)的字体大小来判断的,      如 html的font-size:100p ...

  4. IOS开发系列之阿堂教程:玩转IPhone客户端和Web服务端交互(客户端)实践

    说到ios的应用开发,我们不能不提到web server服务端,如果没有服务端的支持,ios应用开发就没有多大意义了,因为从事过手机开发的朋友都知道(Android也一样),大量复杂业务的处理和数据库 ...

  5. uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据

    h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/p ...

  6. web移动端适配方案

    web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...

  7. 【转】web移动端一些常用知识

    1.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影) a,button,input,optgroup,select,textarea { -webkit-tap-highligh ...

  8. web移动端一些常用知识

    1.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影) a,button,input,optgroup,select,textarea { -webkit-tap-highligh ...

  9. iPhone X 适配手机端 H5 页面通用解决方案

    一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...

随机推荐

  1. maven 经常使用命令

    版权声明:本文为博主原创文章,未经博主同意不得转载. 安金龙 的博客. https://blog.csdn.net/smile0198/article/details/25567541 刚開始用.记录 ...

  2. UVA1646-Edge Case(递推+斐波那契数列)

    Problem UVA1646-Edge Case Time Limit: 3000 mSec Problem Description Input For each test case, you ge ...

  3. ESP8266串口和MQTT服务器消息互传(版本一) 单纯透传+保存WIFI账号信息

    目标 制作一个ESP8266串口和MQTT相互透传的小WIFI,可用手机修改其连接的路由器,由此该模块可以任意加载到各种串口传输的单片机上,完成硬件到云端的传输. 1 实物图 2 MQTT网页测试客户 ...

  4. 裸奔的智能插座:博联Broadlink SP2/SP mini的分析、破解

    https://www.jianshu.com/p/028b10bc3dd1 智能设备的联动通常采用IFTTT的方式,但这种方式受限于官方软件提供的功能.想要自主地灵活控制,需要有官方SDK,或知道协 ...

  5. ORA-16433 The database must be opened in read write mode故障解决

    转 一.首先删除原有控制文件并新建控制文件 1.找到控制文件位置 SQL> show parameter control_files; NAME TYPE VALUE ------------- ...

  6. robotframework连接mysql数据库

    1.安装databaselibrary.pymysql 通过cmd命令执行: pip install robotframework-databaselibrary pip install pymysq ...

  7. E:dpkg was interrupted, you must manually run'dpkg配置'to correct the problem.

    执行sudo apt-get install安装对应的软件出现如下错误 详细错误信息: E: Could not : Resource temporarily unavailable) E: Unab ...

  8. 【转】idea 2018注册码(激活码)永久性的

    百度的,上一个没用多久就挂了,这次用http://idea.toocruel.net 激活方式:License Server1.将地址 http://active.chinapyg.com/ 或者 h ...

  9. linux之dos2unix命令

    今天在使用脚本升级的时候碰到一个问题,然后写了一个简单的自测脚本进行测试,如上图,理论上应该输出 /usr/local/mysql/bin/mysqldump -h 127.0.0.1 -uroot ...

  10. 从零开始搭建django前后端分离项目 系列四(实战之实时进度)

    本项目实现了任务执行的实时进度查询 实现方式 前端websocket + 后端websocket + 后端redis订阅/发布 实现原理 任务执行后,假设用变量num标记任务执行的进度,然后将num发 ...