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-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适配(底部栏黑横线)的更多相关文章
- 移动端iPhone系列适配问题的一些坑
完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...
- 移动端iPhone系列适配问题
问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appear ...
- web移动端rem的适配
** 需求: 随着移动端设备的变化,内容也跟着变化.**先来说说rem单位,以rem为单位,其大小是根据根元素(html标签)的字体大小来判断的, 如 html的font-size:100p ...
- IOS开发系列之阿堂教程:玩转IPhone客户端和Web服务端交互(客户端)实践
说到ios的应用开发,我们不能不提到web server服务端,如果没有服务端的支持,ios应用开发就没有多大意义了,因为从事过手机开发的朋友都知道(Android也一样),大量复杂业务的处理和数据库 ...
- uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据
h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/p ...
- web移动端适配方案
web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...
- 【转】web移动端一些常用知识
1.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影) a,button,input,optgroup,select,textarea { -webkit-tap-highligh ...
- web移动端一些常用知识
1.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影) a,button,input,optgroup,select,textarea { -webkit-tap-highligh ...
- iPhone X 适配手机端 H5 页面通用解决方案
一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...
随机推荐
- Scrapy 框架 中间件 代理IP 提高效率
中间件 拦截请求跟响应 进行ua(User-Agent ) 伪装 代理 IP 中间件位置: 引擎 和下载器 中间 的中间件 ( 下载中间件) 引擎 跟 spider 中间 的中间件 ( 爬虫中间件)( ...
- https的证书认证 iOS版
一.证书链 SecTrustRef: SecTrustRef trust = challenge.protectionSpace.serverTrust; 需要先拿出一个 SecTrustRef 对象 ...
- 想要快速上手 Spring Boot?看这些教程就足够了!
1.项目名称:分布式敏捷开发系统架构 项目简介:基于 Spring + SpringMVC + Mybatis 分布式敏捷开发系统架构,提供整套公共微服务服务模块:集中权限管理(单点登录).内容管理. ...
- NET缓存框架CacheManager在混合式开发框架中的应用(1)-CacheManager的介绍和使用
在我们开发的很多分布式项目里面(如基于WCF服务.Web API服务方式),由于数据提供涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发式增长,如果数据库服务器 ...
- L2-012 关于堆的判断 (25 分)
就是一个最小根堆. 最小根堆的性质,根节点小于等于子树的完全二叉树吧. 构建最小根堆的过程就是一个自下向上的过程. #include<iostream> #include<strin ...
- 【vue】在移动端使用better-scroll 实现滚动效果
安装依赖:(c)npm install better-scroll --save 引入: import BScroll from 'better-scroll' 格式: var obj = new B ...
- svn解决冲突问题
1.在linux的branchs下创建了一个新的分支branch_2后,commit.提示: 2.这是把/my_branch/index.html删除后svn update也不能解决问题 3.到myb ...
- mybatis之一对多
今天主要话题围绕这么几个方面? mybatis一对多示例 sql优化策略 一.mybatis之一对多 在说一对多之前,顺便说一下一对一. 一对一,常见的例子,比如以常见的班级例子来说,一个班主任只属于 ...
- linux之dos2unix命令
今天在使用脚本升级的时候碰到一个问题,然后写了一个简单的自测脚本进行测试,如上图,理论上应该输出 /usr/local/mysql/bin/mysqldump -h 127.0.0.1 -uroot ...
- 【P1941】 飞扬的小鸟
题目描述 游戏界面是一个长为 nn,高为 mm 的二维平面,其中有 kk 个管道(忽略管道的宽度). 小鸟始终在游戏界面内移动.小鸟从游戏界面最左边任意整数高度位置出发,到达游戏界面最右边时,游戏完成 ...