[转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配
基础知识
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适配的更多相关文章
- 52 (OC)* 苹果手机各种尺寸详细表以及iPhoneX、iPhoneXS、iPhoneXR、iPhoneXSMax屏幕适配
iPhone设备 物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的. 代数 设备 操作系统 逻辑分辨率(point) 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子 iPhone ...
- iOS iPhoneX/iPhoneXS/iPhoneXR/iPhoneXS Max系列适配
以前异性屏只有一款iPhoneX,所以在适配的时候直接判断高度是否等于812即可判断是否是iPhoneX #define IS_IPHONE_X (IS_IPHONE && SCREE ...
- 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
此篇文章是对上一篇文章(http://www.ifiero.com/index.php/archives/611)的进一步补充,主要说明如何适配Apple的最新三款手机iPhoneXs.iPhoneX ...
- 适用于hips ui的iPhoneX及以上适配方案
版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...
- H5网页适配 iPhoneX，就是这么简单
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
- H5网页适配 iPhoneX，就是这么简单（转）
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
- 手机端适配iPhoneX
iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...
- 如何适配处理iphoneX底部的横条 - ios
iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条“Home Indicator”.当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适配解决呢? 第一步: ...
- 超全面！UI设计师如何适配2018新款iPhone
北京时间9月13日凌晨1点,苹果在美国加利福尼亚州的Apple Park园区召开了2018年苹果秋季新品发布会. 很多人对这次科技界的春晚充满了期待,除了那些让人“剁手”的新品,设计师关注的还有新手机 ...
随机推荐
- P1451 求细胞数量
题目描述 一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右若还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数.(1<=m,n<=100)? 输入输出格式 输 ...
- Vim内直接使用p粘贴系统剪切板
解决方法 set clipboard=unnamed
- MySql数据库字段排序规则不一致产生的一个问题
最近项目向MySql迁移,迁移完毕后,在获取用户权限时产生了一个异常,跟踪进去获取执行的语句如下, SELECT PermissionId FROM spysxtPermission WHERE (R ...
- 详解最大似然估计（MLE）、最大后验概率估计（MAP），以及贝叶斯公式的理解
转载声明:本文为转载文章,发表于nebulaf91的csdn博客.欢迎转载,但请务必保留本信息,注明文章出处. 原文作者: nebulaf91 原文原始地址:http://blog.csdn.net/ ...
- 2017-12-20python全栈9期第五天第二节之可变 数据类型和不可变数据类型
- 实验一 Java环境的搭建&Eclipse的安装
本次实验为在自己电脑上搭建Java环境,熟悉Java的编译和运行环境并安装Eclipse 一.JAVA环境的搭建 1.从Oracle网站上下载Java的jdk [https://www.oracle. ...
- linux学习------磁盘性能测试
测试服务器 1核1G配置 下载后放在你想测试的目录下,执行preparefile.sh准备测试文件,完成后执行runTest.sh执行测试,等待测试结果完成. {sysbench_bin}> ...
- 循环队列和链式队列（C++实现）
循环队列: 1.循环队列中判断队空的方法是判断front==rear,队满的方法是判断front=(rear+1)%maxSize.(我曾经想过为什么不用一个length表示队长,当length==m ...
- subset_lat_dir.sh
#!/bin/bash # Copyright 2018 Jarvan Wang # Copyright 2017 Vimal Manohar # Apache 2.0. cmd=ru ...
- 20164305 徐广皓 Exp5 MSF基础应用
一.知识点总结 二.攻击实例 主动攻击的实践 ms08_067(win7) payload/generic/shell_reverse_tcp(失败) payload/windows/meterpre ...