方法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适配!!!的更多相关文章

  1. css iphonex适配

    /*  iphonex适配 */ @media only screen and (device-width:375px) and (-webkit-device-pixel-ratio: 3) { . ...

  2. Cocos Creator iPhoneX适配的解决办法

    研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...

  3. iphonex适配

    这一篇具体适配步骤比较全面 iphonex适配 这一篇图文讲解比较全面 关于H5页面在iPhoneX适配

  4. IphoneX适配正确姿势

    IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator) ...

  5. 关于H5页面在iPhoneX适配

    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...

  6. 关于H5页面在iPhoneX适配(转)

    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...

  7. iphoneX 适配

    1.iphoneX的尺寸  375*812   上边有44px的危险区,下边有34px的危险区,剩下的是安全区. 2.viewport设值cover <meta name="viewp ...

  8. 已有项目 iPhoneX 适配

    一.Assets 文件图片管理下的 LaunchImage 添加 iOS8.0 and latter 一项,并放一张 1125*2436 的LaunchPage 到对应的位置上. 二.有关 iPhon ...

  9. iPhoneX 适配H5页面的解决方案

    由于在iPhonex在状态栏增加了24px的高度,对于通栏banner规范的内容区域会有遮挡情况. 解决方案:在页面通栏banner顶部增加一层高度44px的黑色适配层,整个页面往下挪44px,这种做 ...

随机推荐

  1. USB_4大描述符

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/aaa6695798/archive/2009/11/06/4776202.aspx 在USB描述符中,从上到下分为四个 ...

  2. Java的内省机制

    我现在的理解就是,Java的内省机制就是针对JavaBean的,可以获取到类的属性名称,以及属性的Getter和Setter方法,应该是在写框架的时候才会用到内省机制,还有一个地方可以用到内省机制,就 ...

  3. JWT认证

    1.什么是JWT Token JWT(Json Web Tokens) 是一个开放标准(RFC 7519),它定义了一种简洁,自包含,JSON 对象形式的安全传递信息的方法.JWT常用在 Web 应用 ...

  4. float clearfix

    Float float 属性的原本作用是: 为了实现文字环绕效果 float 父元素高度塌陷实现文字环绕效果 float 固定一列宽的自适应布局 float 多列布局` float 固定一列宽的自适应 ...

  5. keytool导入导出多条目对比【原】

    步骤一:生成orange.keystore和banana.keystore keytool -genkey -alias orange -keyalg RSA -keysize 1024 -keypa ...

  6. SpringBoot系列: Eclipse+Maven环境准备

    这个链接比我写得更全面, http://tengj.top/2018/01/01/maven/ =============================20190115补充: maven 的一些插件 ...

  7. java设计模式之单例模式以及实现的几种方法

    java设计模式以及实现的几种方法,看到比较好的博客文章,收藏起来供以后再次阅读.. 参见:http://www.cnblogs.com/garryfu/p/7976546.html

  8. python之读写文件

    1. 读取文件数据,文件必须存在才可以读且如要读取的文件不和当前.py在同一个包下,需要特别指定此文件路径才行 f=open('test.txt',encoding='utf-8')#填写文件路径,打 ...

  9. JVM栈和堆的详解

    一.基本了解 java的数据类型分为两种:基本类型和引用类型.基本类型的变量保存的是原始值,引用类型的变量保存的是引用值.引用值代表某个对象的引用,而不是对象本身,对象本身放在这个引用值所表示的地址的 ...

  10. cmd关闭被占用的端口命令及教程详解

    //关闭端口占用命令eg:1. netstat -nao | findstr “8080” 查询8080端口2. taskkill /pid 3017 /F 关闭pid为3017的进程 //详解 ↓但 ...