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,这种做 ...
随机推荐
- Hortonworks官网文档怎么找?
Hortonworks官网文档怎么找? 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 俗话说,授人予鱼不如授人予渔,网上部署HDP的部署方式的博客有很多,看得你是眼花缭乱的.其实万 ...
- Spring 在 xml配置文件 或 annotation 注解中 运用Spring EL表达式
Spring EL 一:在Spring xml 配置文件中运用 Spring EL Spring EL 采用 #{Sp Expression Language} 即 #{spring表达式} ...
- rsync 文件同步(差异复制)
Rsync 是一种快速且极其通用的文件复制工具.以其 Delta 传输算法,通过仅发送源文件和目标中现有文件之间的差异来减少通过网络发送的数据量 Rsync 的几种复制方式:Local,SSH 和 R ...
- mysq存储金额的数值类型选择
在之前得项目中用到了double,计算之后有很长得小数位,需要用算法去除,非常麻烦,以后推荐使用:decimal 这个是专门处理金额值的,Java 类型对应BigDecimal
- JavaSrcipt的数字(number):深入理解内部机制
一.数字的语法 JavaScript中的数字字面量一般用十进制表示.在JavaScript中表示数字的数据类型只有一种Number,这种天使与魔鬼同体的数据类型也就只有js了. //同时表达整数和浮点 ...
- oldboy s21day01
1.操作系统的作用? 人操作软件,软件控制操作系统,操作系统控制硬件.2.列举你听过的操作系统及区别? 1.Windows 7/8/10 付费,操作方便,长时间运行卡顿. 2.Linux(Ubuntu ...
- termux 开启 sshd
众所周知, termux 上的 sshd 不能通过 IP 连接, 只能使用密钥, 对于使用 PuTTY 的 Windows 用户, 怎么办呢? 由于 PuTTY 支持 telnet, 而 termux ...
- instanceof 操作符实现原理解析
本文会介绍ES6规范中 instanceof 操作符的实现,以及自定义 instanceof 操作符行为的几个方法. 文中涉及的规范相关的代码皆为伪代码,为了便于理解,其中可能会省略一些参数判断逻辑或 ...
- a*寻路分析
http://dev.gameres.com/Program/Abstract/Arithmetic/A%20Pathfinding%20for%20Beginners.htm 定义: 绿色节点为A ...
- Loadrunner 如何在其他浏览器进行录制(一)
背景: 由于lr只支持低版本的IE浏览器,当我们想使用高版本或其他浏览器进行录制时,这时,我们需要用到浏览器的代理功能. 传统的访问模式如下: 使用代理后的访问方式: 下面来总结一下具体的步骤: 1. ...