方法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. WebStorm记录(2)

    继续效果图 CSS初始化 前面理解错了,背景图应该铺满 <div class="bg"> html,body,*{ /*盒子模型使用边框模式*/ box-sizing: ...

  2. OPCServer:使用KEPServer

    实际OPCServer使用(450M,中文,破解时间限制):KEPServer V6,百度网盘 ,密码: ykj2 本文为Java实现OPC通信的一部分 KEPServer中文官网 KEPServer ...

  3. js方法参数中含有单引号双引号的处理

    最近在做项目时,遇到一个问题.当在js脚本中,拼接生成一个tr,然后添加到一个表格里. //假定testval是从后台传过来的数据 var testval = "含有'半角单引号的字符串&q ...

  4. HDU 1028(数字拆分 分治)

    题意是求所给的数能够被拆分成的不同组合数目. 方法有三种: 一.完全背包. 限制条件:所用数字不大于 n. 目标:求分解种数(组合出 n 的方法数). 令 dp[ i ][ j ] = x 表示 用前 ...

  5. 如何在Mac上搭建自己的服务器——Nginx

    1.安装Homebrew 打开终端,输入: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...

  6. 修改VS 2012调试默认浏览器

    首先用vs打开我们的工程文件,点击任意一个aspx文件,点右键,找到弹出菜单中的“浏览方式”,如图: 然后点击“浏览方式”或者“Browser with”,弹出如图对话框: 

  7. 几本不错的数据仓库和Hadoop书籍

    <<Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案>>, Matt Casters等著,初建军翻译<<Hadoop应用架构>> ...

  8. JDK源码之ArrayList

    序言 ArrayList底层通过数组实现. ArrayList即动态数组,实现了动态的添加和减少元素 需要注意的是,容量拓展,是创建一个新的数组,然后将旧数组上的数组copy到新数组,这是一个很大的消 ...

  9. SpringBoot入门笔记(一)、HelloWorld

    本文是一篇SprintBoot学习入门笔记 1.打开Eclipse,版本为Oxygen 4.7.0 2.新建项目NewProject->MavenProject->Next->Nex ...

  10. 【python小练】0014题 和 0015 题

    第 0014 题: 纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示: { ":["张三",150,120,100], ":[& ...