iPhone刘海屏踩坑记录

栏目: IOS · 发布时间: 5年前

内容简介:在项目中,需要针对iphone的刘海屏幕进行单独的适配,这就需要看如何检测刘海屏幕了。而且,同一款机型,得出来的屏幕分辨率还有可能不同,下面把处理刘海屏中踩过的坑进行总结。某些情况下,我们在样式方面需要对iphone的刘海屏机型需要做特殊的处理。目前有三款刘海屏iphone,分别是具体的分辨率情况如下:

在项目中,需要针对iphone的刘海屏幕进行单独的适配,这就需要看如何检测刘海屏幕了。而且,同一款机型,得出来的屏幕分辨率还有可能不同,下面把处理刘海屏中踩过的坑进行总结。

检测iphone刘海屏

某些情况下,我们在样式方面需要对iphone的刘海屏机型需要做特殊的处理。目前有三款刘海屏iphone,分别是 iphoneXiphoneXRiphoneXS max 三种。其中三者的分辨率和像素比是不同的,而且 iphoneXRiphoneXS 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刘海屏踩坑记录》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

用户体验的要素

用户体验的要素

Jesse James Garrett / 范晓燕 / 机械工业出版社 / 2007年10月 / 25.00

这不是一本关于“怎样做(How-to)”的书。有很多很多讨论如何建设网站的书,这本不是。 这不是一本关于技术的书。在这里你找不到一行代码。 这不是一本有答案的书。相反,这本书说的是“如何提出正确的问题”。 这本书将告诉你,在你阅读其他书籍的之前,你需要提前了解什么。如果你需要一个大的概念,如果你需要了解用户体验设计师所做出的决策的环境,这本书很适合你。 这本书经过精心设计,......一起来看看 《用户体验的要素》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器