iphoneX适配!!!
方法1.js判断(以下采用Jquery)
//适配iphonex
if($(window).width() === && $(window).height() === && window.devicePixelRatio === ){
$(".end-page").addClass("step-page-x");
$(".false-img").css("paddingTop","2.5rem");
}
方法2.利用iphoneX独特的型号参数
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:) {
#btn {
padding-bottom:34px;
}
}
375 — iphoneX设备的宽度
812 — iphoneX设备的高度
3 — iphoneX设备的分辨率
724 — iphoneX设备的高度(812) - 顶部通栏高度(88)
注意:
使用第一种方法js判断的时候,$(window).height()计算的是扣掉所在浏览器的头部底部后的高度,这边的724是指H5在微信客户端打开,扣掉微信客户端自带的头部导航高度88后,所的724高度。
但是要是在其它浏览器(uc浏览器),嵌在uc浏览器客户端里面,UC浏览器有自带的头部导航和底部导航,所以$(window).height()计算出来的不是724,不同客户端计算出来的$(window).height()不一定一样,所以推荐使用第二种方法媒体查询进行适配。
iphoneX适配!!!的更多相关文章
- css iphonex适配
/* iphonex适配 */ @media only screen and (device-width:375px) and (-webkit-device-pixel-ratio: 3) { . ...
- Cocos Creator iPhoneX适配的解决办法
研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...
- iphonex适配
这一篇具体适配步骤比较全面 iphonex适配 这一篇图文讲解比较全面 关于H5页面在iPhoneX适配
- IphoneX适配正确姿势
IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator) ...
- 关于H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 关于H5页面在iPhoneX适配(转)
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- iphoneX 适配
1.iphoneX的尺寸 375*812 上边有44px的危险区,下边有34px的危险区,剩下的是安全区. 2.viewport设值cover <meta name="viewp ...
- 已有项目 iPhoneX 适配
一.Assets 文件图片管理下的 LaunchImage 添加 iOS8.0 and latter 一项,并放一张 1125*2436 的LaunchPage 到对应的位置上. 二.有关 iPhon ...
- iPhoneX 适配H5页面的解决方案
由于在iPhonex在状态栏增加了24px的高度,对于通栏banner规范的内容区域会有遮挡情况. 解决方案:在页面通栏banner顶部增加一层高度44px的黑色适配层,整个页面往下挪44px,这种做 ...
随机推荐
- java 中+的运算规则
1.Java中的加法的运算优先级是从左往右的 2.字符串""隔壁跟的+号意思是字符串的连接 就不是加法了 3.'字符' 后面的+号意思是'字符'的ascall码值和后面的值相加 c ...
- Python 排序和numpy排序,得到排序后索引序列(及源list的序列)
Python list 排序 & np list 排序 nums = [1.25, 0.98, 6.13, 7.62] li = np.array(nums) print(li) out = ...
- 解决gitk显示文件内容中文乱码
解决gitk显示文件内容中文乱码 1.git config 命令 设置git gui的界面编码 git config --global gui.encoding utf-8 2.修改配置文件 在~\e ...
- Idea中的一些快捷键
最常用快捷键 sout 输出语句 psvm 输出main方法 fori 输出for语句 iter 输出foreach语句 Ctrl+Shift+U 大小写转换 Ctrl+Shift+Enter 补全一 ...
- ByteBuffer详解
注意:一定要了解这个缓冲类的几个方法和那几个字段.不然你不会明白的. 字段: position ,limit ,mark 方法:clear(), hasRemaining(),flip() 推荐博客: ...
- 【2】【leetcode-105,106】 从前序与中序遍历序列构造二叉树,从中序与后序遍历序列构造二叉树
105. 从前序与中序遍历序列构造二叉树 (没思路,典型记住思路好做) 根据一棵树的前序遍历与中序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 前序遍历 preorder = [ ...
- Spring Boot中使用使用Spring Security和JWT
目标 1.Token鉴权 2.Restful API 3.Spring Security+JWT 开始 自行新建Spring Boot工程 引入相关依赖 <dependency> < ...
- vue-cli3 第三版安装搭建项目
Vue CLI是一个用于快速Vue.js开发的完整系统 3.X较2.X结构变了很多,更优雅,开发体验更好 官方:https://cli.vuejs.org/guide/ 安装:https://cli. ...
- 使用js弹出div刷新时闪烁解决方法
<div style="visibility: hidden"> //弹出div内容 </div>
- JDK8新特性02 Lambda表达式02_Lambda语法规则
//函数式接口:只有一个抽象方法的接口称为函数式接口. 可以使用注解 @FunctionalInterface 修饰 @FunctionalInterface public interface MyF ...