iPhone放大模式详解
背景
在项目中,需要针对iphone的刘海屏幕进行单独的适配,这就需要看如何检测刘海屏幕了。而且,同一款机型,得出来的屏幕分辨率还有可能不同,下面把处理刘海屏中踩过的坑进行总结。
检测iphone刘海屏
某些情况下,我们在样式方面需要对iphone的刘海屏机型需要做特殊的处理。目前有三款刘海屏iphone,分别是iphoneX
、iphoneXR
、iphoneXS max
三种。其中三者的分辨率和像素比是不同的,而且iphoneXR
和iphoneXS max
两款手机还可以选择放大
的显示模式,因此理论上有两种不同的分辨率。关于显示模式的介绍可以看下面的内容。
具体的分辨率情况如下:
设备 | 像素比(dpr) | 屏幕分辨率 | 放大模式 |
---|---|---|---|
iphoneX | 3 | 1125*2436 | 无 |
iphoneXs max | 3 | 1242*2688 | 1125*2436 |
iphoneXr | 2 | 828 *1792 | 750*1624 |
判断逻辑
综上特点,因此需要根据ua中的信息,判断当前手机的平台,以及根据当前获取到的分辨率,推断当前是否为刘海机型。直接贴代码:
// 获得手机平台
OS: (function() {const userAgent = navigator.userAgent;if (/\bAndroid\b/i.test(userAgent)) {return 'Android';} else if (/\bip[honead]+\b/i.test(userAgent) ||/\biOS\b/i.test(userAgent)) {return 'IOS';}return null;}()),// 判断机型
let ratio = window.devicePixelRatio || 1;
let screen = {width: window.screen.width * ratio,height: window.screen.height * ratio
};
const isX = screen.width === 1125 && screen.height === 2436;
const isXSMAX = screen.width === 1242 && screen.height === 2688;
const isXR = (screen.width === 750 && screen.height === 1624 || screen.width === 828 && screen.height === 1792);// 那么判断是否是刘海屏
const isIOS = this.OS === 'IOS';
return isIOS && (isX || isXSMAX || isXR);
复制代码
为什么放大模式需要单独适配
iphone的放大模式原理是使用较低以及的逻辑分辨率渲染,然后拉伸显示到屏幕上。
例如新机推出时,如果有新的分辨率时,有一种比较简单的适配就是适配之前相同比例下面的小屏,例如plus机型适配到同数字的机型,max机型适配到X机型等等。
iPhone的16:9的屏幕的逻辑分辨率,一共有三种:320×480,375×667,414×736,分别对应4'',4.7'',5.5''的屏幕。 对于4.7''和5.5''的屏幕来说,更低一级的逻辑分辨率分别是320×480和375×667。同时,只要App适配这两个分辨率(当然是适配的),那么不需要做任何修改,就可以直接运行。好了,为什么iPhone X没有放大模式呢?因为iPhone X没有现成的更低一级的逻辑分辨率,如果强行加上,那么几乎全部App都要针对一个新的、只有在iPhone X的放大模式下才会出现的逻辑分辨率进行适配,这个成本实在是太大了。当然,iPhone XS Max上是有放大模式的,因为iPhone X的逻辑分辨率,就是iPhone XS Max放大模式下的逻辑分辨率,同样不需要针对性适配。
iPhone放大模式详解相关推荐
- 纹理基础知识和过滤模式详解
转载自 纹理基础知识和过滤模式详解 1. 为什么在纹理采样时候需要 texture filter (纹理过滤) 我们的纹理 要贴到三维图形表面,而三维图形上的pixel中心与纹理上的texel中心并不 ...
- getinstance方法详解_二、设计模式总览及工厂模式详解
二.架构师内功心法之设计模式 2.架构师内功心法之设计模式 2.1.课程目标 1.通过对本章内容的学习,了解设计模式的由来. 2.介绍设计模式能帮我们解决哪些问题. 3.剖析工厂模式的历史由来及应用场 ...
- Spotify敏捷模式详解三部曲第二篇:研发过程
本文转自:Scrum 中文网 引言 在本系列文章的第一篇,我们介绍了Spotify的敏捷研发团队,以及它独特的组织架构.Spotify的研发团队采用的是一种非常独特的组织架构,如下图所示: 整个研发组 ...
- Spotify敏捷模式详解三部曲第一篇:研发团队
本文转自:Scrum中文网 引言 2018年4月,来自北欧瑞典的音乐流媒体公司.百亿美元独角兽Spotify创造了历史,它成为了当代上市公司当中,第一家通过"直接上市"的方式在美国 ...
- Docker(十四):Docker:网络模式详解
Docker作为目前最火的轻量级容器技术,牛逼的功能,如Docker的镜像管理,不足的地方网络方面. Docker自身的4种网络工作方式,和一些自定义网络模式 安装Docker时,它会自动创建三个网络 ...
- linux apache两种工作模式详解
apache两种工作模式详解 刚接触这两个配置时很迷糊,全部开启或全部注释没有几多变化.今天搜索到这么一篇讲得还不错的文章,看了几篇,还是不能完全记住,做一个收藏. 空闲子进程:是指没有正在处理请求的 ...
- cglib动态代理jar包_代理模式详解:静态代理+JDK/CGLIB 动态代理实战
1. 代理模式 代理模式是一种比较好的理解的设计模式.简单来说就是 我们使用代理对象来代替对真实对象(real object)的访问,这样就可以在不修改原目标对象的前提下,提供额外的功能操作,扩展目标 ...
- STM32开发 -- 低功耗模式详解(2)
如需转载请注明出处:https://juyou.blog.csdn.net/article/details/98631012 上一篇文章 STM32开发 – 低功耗模式详解(1) 简单的总结了一下低功 ...
- 【Tools】VMware虚拟机三种网络模式详解和操作
00. 目录 文章目录 00. 目录 01. VMware虚拟机三种网络模式 02. Bridged(桥接模式) 03. NAT(地址转换模式) 04. Host-Only(仅主机模式) 05. 参考 ...
最新文章
- MyBatis:参数传递 [转]
- .net程序部署(mono方式)
- DIY自行车测速测距仪
- soureTree中如何设置git 用户名与密码 SourceTree提交修改用户详细图文方法
- paip.哈米架构CAO.txt
- 真实VS虚拟,虚拟现实如何定义
- JAVA入门_工具类_书籍借阅日期计算
- 弹性均质圆环法计算过程_盾构隧道衬砌结构内力计算方法的对比浅析
- eclipse php jquery,Eclipse 支持jQuery 自动提示
- 外卖cps返利小程序饿了么美团对接公众号返利系统分销系统源码
- 严蔚敏《数据结构》 迪杰斯特拉算法
- 重温Spring笔记3 - 依赖注入
- caj 获取my documents目录错误,可能“我的文档”目录不存在
- js 数组操作的push pop shift unshift 等方法
- java发送邮件时获取uid
- Android 实现扑克牌动画,Android扑克牌猜点小游戏源码
- 量子计算机不是永动机,几种人类设计的永动机,最后一个是谁设计的!彻底服了!...
- PFC中各服务对象使用说明
- 输出1-100的奇数(每行输出6个)
- ubuntu18.04安装无线网卡驱动安装心得(解决无法在线下载驱动问题)
热门文章
- 买卖股票的最佳时机IV
- linux服务器nvidia驱动的安装与卸载
- python3 出现错误:TypeError: must be str, not list
- mysql中int型的zerofill参数
- [BUUCTF-pwn]——jarvisoj_tell_me_something
- 简单易懂的 pwnable.kr 第六题[random]Writeupt
- socket网络编程——套接字地址结构
- react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件
- 计算机存储器可分两类,计算机存储器可分为几类?它们的主要区别是什么?
- HLS—AXI4-Lite Interface