[转] 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年苹果秋季新品发布会. 很多人对这次科技界的春晚充满了期待,除了那些让人“剁手”的新品,设计师关注的还有新手机 ...
随机推荐
- css:a:visited限制
:active 对于:active伪类可以在div上生效.没有限制 :visited使用限制 :visited只适用于带href的a标签.如果给a标签绑定了click事件,那跳转的url必须跟href ...
- dgraph实现基本操作
dgraph实现基本操作 简单介绍 dgraph 是一个分布式图数据库 mutate 为一个突变, 一般认为添加数据或者是删除数据为一个突变 query 为一个查询 golang实现dgraph的基本 ...
- Django web编程1 -- 创建项目和应用
python:3.7.2 Django:2.1.7 1.创建虚拟环境 虚拟环境是系统的一个位置,可以在其中安装包,并将其与其他python包隔离. 创建目录,命名为learning_log,并切换到这 ...
- Spring项目使用Junit4测试配置
我们经常要写junit测试,在不启动整个web项目的情况下,测试自己的service实现或者是dao实现,我们来充分利用下junit4的强大功能. 1.junit4的测试类 import java.u ...
- 快速掌握Nginx(二) —— Nginx的Location和Rewrite
1 location详解 1.location匹配规则 Nginx中location的作用是根据Url来决定怎么处理用户请求(转发请求给其他服务器处理或者查找本地文件进行处理).location支持正 ...
- Python高级笔记(二) -- 深拷贝和浅拷贝
1. 深拷贝 1.1 类型1 注意: d没有改变, 因为d所拷贝的数据没有改变, 而是c往后添加数据. 1.2 类型2: 元组 如果copy.copy拷贝的是元组是深拷贝! 不会进行浅拷贝, 仅仅是指 ...
- node-fs文件系统模块
在node环境中所有与文件操作都是通过fs核心模块实现的.包括文件的创建.删除.查询以及读写和写入 在 fs 模块中,所有的方法都分为同步和异步两种实现,具有 sync 后缀的方法为同步方法,不具有 ...
- You have an error in your SQL syntax; check the manual that corresponds to your MySQL server versio
Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL ...
- react native 安卓home返回键页面刷新
import { withNavigationFocus } from 'react-navigation'; class Warngreete extends React.Component { c ...
- QMQTT简单介绍(1)
1 准备工具: wireshark安装包:网络抓包工具qmqtt源码:mqtt客户端源码(Qt版本)官网:http://mqtt.org/英文版协议说明文档:http://docs.oasis-ope ...