基础知识

1. 关于iphoneX 、iphoneXS、iphoneXSMax、iphoneXR机型的大小和像素

 
机型尺寸

注意：开发人员只需要记住开发尺寸

2. 屏幕组成
齐刘海(44px) + 安全区域 + 手势区域(34px)

 
屏幕组成
适配方案

1. viewport-fit

viewport-fit="contain"展示区域在安全区中，不包括齐刘海和底部手势区域

viewport-fit="cover"展示区域整个屏幕中，包括齐刘海和底部手势区域

所以使用viewport-fit="contain"就可以解决适配问题，将下面的代码放在<head>标签中。

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">

2. css媒体查询

X、XS机型的媒体查询

/* x xs */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

   // iphoneX iphoneXS样式

}

XR机型媒体查询

/* xr */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {

    // iphoneXR样式

}

XS MAX机型媒体查询

/* xs max */

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {

    // iphoneXR样式

}

3. js判断

通过window.navigator.userAgent、window.devicePixelRatio、window.screen三个属性来匹配

X、XS机型js检查

let isIphoneX = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812)

XR机型js检查

let isIphoneXr = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896)

XS MAX机型js检查

let isIphoneXsMax = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896)
 

[转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配的更多相关文章

  1. 52 (OC)* 苹果手机各种尺寸详细表以及iPhoneX、iPhoneXS、iPhoneXR、iPhoneXSMax屏幕适配

     iPhone设备 物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的. 代数 设备 操作系统 逻辑分辨率(point) 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子   iPhone ...

  2. iOS iPhoneX/iPhoneXS/iPhoneXR/iPhoneXS Max系列适配

    以前异性屏只有一款iPhoneX,所以在适配的时候直接判断高度是否等于812即可判断是否是iPhoneX #define IS_IPHONE_X (IS_IPHONE && SCREE ...

  3. 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域

    此篇文章是对上一篇文章(http://www.ifiero.com/index.php/archives/611)的进一步补充,主要说明如何适配Apple的最新三款手机iPhoneXs.iPhoneX ...

  4. 适用于hips ui的iPhoneX及以上适配方案

    版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...

  5. H5网页适配 iPhoneX，就是这么简单

    iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...

  6. H5网页适配 iPhoneX，就是这么简单（转）

    iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...

  7. 手机端适配iPhoneX

    iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...

  8. 如何适配处理iphoneX底部的横条 - ios

    iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条“Home Indicator”.当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适配解决呢? 第一步: ...

  9. 超全面！UI设计师如何适配2018新款iPhone

    北京时间9月13日凌晨1点,苹果在美国加利福尼亚州的Apple Park园区召开了2018年苹果秋季新品发布会. 很多人对这次科技界的春晚充满了期待,除了那些让人“剁手”的新品,设计师关注的还有新手机 ...

随机推荐

  1. wqs二分

    今天模拟赛有一道林克卡特树,完全没有思路 赛后想了一想,不就是求\(k+1\)条不相交的链,使其权值之和最大嘛,傻了. 有一个最裸的\(DP\),设\(f[i][j][k]\)表示在以\(i\)为根的 ...

  2. Dijkstra【迪杰斯特拉算法】

    有关最短路径的最后一个算法——Dijkstra 迪杰斯特拉算法是由荷兰计算机科学家迪杰斯特拉于1959 年提出的,因此又叫迪杰斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有权图中最短路 ...

  3. Unity Technologies-提供全面的技术支持服务

    Unity Technologies-提供全面的技术支持服务 在收费服务是由Unity大华区面向研发企业推出的一项技术支持服务,以全中文的方式进行,为研发团队解答在使用Unity引擎过程中遇到的各类问 ...

  4. MySQL实战45讲学习笔记：索引（第五讲）

    一.需要回表的案例 在下面表T中,执行下面语句,需要执行几次树的搜索操作?会扫描多少行? select * from T where k between 3 and 5 1.初始化语句 mysql&g ...

  5. com.alibaba.druid数据源工具类

    Druid是阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好.它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库, ...

  6. 深入理解Java设计模式之观察者模式

    前言 观察者,即时observer,总结来说就是一个当一个被观察的对象的状态发生变化时,会通知相应的观察者对象.   观察者模式定义了四种角色:抽象主题.具体主题.抽象观察者.具体观察者 1.抽象主题 ...

  7. [BZOJ 4152][AMPPZ 2014]The Captain

    这道题对费用的规定是min(|x1-x2|,|y1-y2|).如果暴力枚举所有的点复杂度O(n²),n <= 200000,显然爆炸.于是我们要考虑加“有效边”,一个显然的事实是对于两个点,如果 ...

  8. LabView ModBus安装

    好久没写东西了(好菜哦...) 最近搞一个项目,开始入门LabVIEW,感觉类似于MATLAB里面的simulink 我使用LabVIEW是想用来和PLC通信的.因为PLC里面可以做ModBus,所以 ...

  9. mysql基础学习

    二.操作表 1.自行创建测试数据: -- 创建数据库create database practice charset utf8;-- 1.自行创建测试数据:---- 创建班级表:classcreate ...

  10. vue老司机

    你和答案之间只差一个关键字 1.对象二级查找值渲染早于数据获取   解决vue.js 数据渲染成功仍报错的问题