方法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. 11、JDBC-Druid

    依赖 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  2. VirtualBox下安装Ubuntu Server 16.04

    安装环境: Windows:确保磁盘空间足够,一般需要8个G左右. 所需文件: 首先在Ubuntu的官网上下载.iso的镜像文件,链接是:http://www.ubuntu.org.cn/server ...

  3. idea打开项目没有文件目录

    如题,利用idea打开一个项目,然而并没有src等主要文件目录. 方法:使用ctrl+shift+alt+s打开目录结构,选择module,再选择import module,注意选择SDK,即JDK.

  4. HTTP.SYS远程执行代码漏洞分析 (MS15-034 )

    写在前言:   在2015年4月安全补丁日,微软发布了11项安全更新,共修复了包括Microsoft Windows.Internet Explorer.Office..NET Framework.S ...

  5. maven项目配置框架

    任何一个maven项目都会继承一个默认的父pom配置:Super POM,详见:https://maven.apache.org/guides/introduction/introduction-to ...

  6. 启动aspx文件错误

    有一次,为了模仿翻页效果,设置的启动也是aspx文件.当时因为重装系统的原因,我的系统暂时不支持aspx文件的发布访问.所以,我就在MIME Type里面添加了对aspx文件的访问,如下图: 这样就可 ...

  7. 微信小程序开发(4) 企业展示

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能. 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ ...

  8. centos6.5配置redis服务 很好用谢谢

    1.下载Redis3.2.5安装包               wget http://download.redis.io/releases/redis-3.2.5.tar.gz   2.解压.编译. ...

  9. Linux查看版本信息

    查看Linux版本以及是32位还是64位 查看版本 一.查看Linux内核版本命令(两种方法): 1.cat /proc/version [root@S-CentOS home]# cat /proc ...

  10. 哈希函数(hash函数)

    hash,—般译为“散列”,也可以直接音译为“哈希”,是对输入的任意长度(又称预映射),通过哈希算法,转换成固定长度的哈希值输出.这种转换是一种压缩映射,即,哈希值空间通常比输入空间小得多,不同的输入 ...