方法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. 使用mysql存放Ambari元数据的配置案例

    使用mysql存放Ambari元数据的配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.环境准备   详情请参考我之前的笔记:离线方式部署Ambari2.6.0.0 中关 ...

  2. Flink HA 搭建坑

    目前网上能找到的做HA的教程基本都无法真正做到多机高可用,包括官方文档,经过很久的折腾,终于做到了多机高可用,希望其它人不再被坑. 集群模式安装 前提条件: 机器已经安装好Java环境 jobMana ...

  3. protobuf 编译安装

    1.protobuf是google公司提出的数据存储格式,详细介绍可以参考:https://developers.google.com/protocol-buffers 2.下载最新的protobuf ...

  4. Hadoop记录-Hive调优:让任务并行执行

    set mapred.job.queue.name=pms;   //设置队列set hive.exec.reducers.max=8;  //设置最大的reducersset mapred.redu ...

  5. photoshop 切图技巧

    前端切图技巧 手动切图 参考线切图 精准切图 自动切图 原文地址 http://www.cnblogs.com/w-wanglei/p/5598336.html

  6. 虚拟机 the image's hash and certificate are not allowed 解决方案

    根据计划,需要在虚拟机上安装一个linux系统,用作web架构学习的服务器. 公司项目的服务器用的是linux系统,具体版本未知.虽然我们开发不用关注最后的部署,但多少也接触了一些,算是有一定的了解, ...

  7. 064、Weave网络结构分析(2019-04-04 周四)

    参考https://www.cnblogs.com/CloudMan6/p/7482035.html   Weave网络使用之前需要执行  eval $(weave env) ,其作用是将后续的doc ...

  8. 016、Dockerfile 常用命令(2019-01-07 周一)

    参考https://www.cnblogs.com/CloudMan6/p/6864000.html   Dokcerfile常见命令   FROM     指定base镜像   MAINTAINER ...

  9. 错误 1 未能找到类型或命名空间名称“DataPager”(是否缺少 using 指令或程序集引用?)

    鄙人在设计器SearchTab.xaml中添加了如下一个分页控件: <sdk:DataPager x:Name="dataPagerPrj" Grid.Row="3 ...

  10. 我手机上常用的app和常访问的网站

    ====常用======Opera Mini browser 浏览器(版本26.0.2254.117241以上) 老版本7.7最最经典, 但该版本在新的安卓手机上总有部分区域显示空白. 现在的 Ope ...