200字范文 > iOS 对iPhone X XS XR XS MAX适配

iOS 对iPhone X XS XR XS MAX适配

时间：2024-06-17 10:20:23

勇~敢~的小伙伴儿们，你们好，其实我本来不打算写关于iPhone X的适配的，虽然我已经做好了我们App对于iPhone X的适配，但是真的觉的很鸡肋，可是iPhone X的真机我在前几天感受了一下，发现终究是逃不了适配这条路，还是写了这篇文章，哎，

以后苹果会不会把这刘海给去掉啊，真的好别扭，我真的觉得iPhone X 好丑，在此立个flag，希望以后能回来打自己脸。嗯就这样。

【.10.26更新】

我来打脸了，XS刚出的时候我暗搓搓的购入了X，我虽然还是觉得刘海很丑，但是X的流畅性让我秒变迷妹，人脸识别的解锁不要太方便好吗，全手势操作不要太方便好吗，但是呢，因为边框窄，玩游戏的时候比如王者荣耀，明明点了回城，却因为手不小心碰到方向盘位置，人物就走了起来，结束了回城，还是有些弊端的（我不会吃鸡，3D游戏眩晕症），没有home键如果手机卡了的时候还是很没有安全感的，觉得有一点手足无措的感觉。还有昨晚睡着的我不知道怎么把我的手机从1m高的桌子上摔到了地上，刚开始没什么问题，到公司后发现我的屏幕碎碎碎碎碎碎了啊！emmm，仔细一看，是我贴的钢化膜碎了。虚惊一场虚惊一场。

我之前的手机用了三年多，电池损耗到只剩70%，去修理的时候，维修的小哥哥说iPhone X换屏巨贵，emmm，我的小心脏啊。

所以买了全面屏的iPhone的小伙伴儿们千万要爱惜啊，我又得去贴膜了·····

关于新上的iPhone XS、XS MAX和XR的适配请移步：iOS 判断 iPhoneXS Max，iPhoneXS，iPhoneXR。

时间问题，我这里就不赘述了，希望可以帮到大家~

[以下原文]

来自一名UI设计师的觉悟：三分钟弄懂iPhone X 设计尺寸和适配

接下来，我们熟悉一下我们常见的屏幕尺寸吧

转化为我们熟悉的像素尺寸

【.10.26更新】

其中倍图其实就是像素尺寸和开发尺寸的倍率关系，这只是外在的表现，倍图核心的影响因素在与PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念。

而本次上新的全面屏手机iPhone X无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变，下面以iPhone 8作为参照物，看看到底iPhone X的适配我们要怎么考虑？

相比较而言，可以发现X和8的宽度一致都是375 pt，但是高度却多了145 pt，这就意味着首屏上可以展示更多的内容，多出了20%的垂直空间，对于京东淘宝而言这就一位置更高的商品曝光率或者是更高的运营价值。所以用iPhone X的胖友请你们捂紧自己的钱包，如果捂不紧，我不介意替大家保管嘻嘻。

上面谈的是开发尺寸，那设计尺寸上，iPhone 8的像素尺寸是750*1334 px（@2X），而iPhone X的像素尺寸是1125*2436 px（@3X），同样的宽度一个用@2X图，一个用@3X图，表现出了更高的清晰度。

iPhone X的屏幕密度为458ppi。

看完了尺寸，我们再看看布局吧

设计师和移动端开发工程师要考虑的布局：

1.保证你的设计布局能够填充整个屏幕；

2.注意你的核心内容不要被设备的大圆角、传感器（齐刘海）、以及独步访问主屏幕的指示灯遮挡；

iPhone X的设计应当填充整个屏幕

注意X的大圆角和传感器

设计布局要填充整个屏幕，这里有两块区域需要额外考虑：

1、屏幕顶部，即StatusBar部分，这条状态栏本来并没有可发挥的空间，但是iphone的StatusBar与NavigationBar背景是可以通栏的，以达到一种完全沉浸式体验的设计。高度为44pt。

大部分的App应该也是没有影响的，主流NavgationBar都采用纯色背景，StatusBar背景沿用NavgationBar的背景，但是对于那些做了NavigationBar视觉效果的设计师就要考虑了，你的渐变色背景、或者带底纹的北背景、还包括电商平台商品图是通栏展示的商品图，多少会对实际效果产生一些影响。

比如，NavigationBar是渐变色背景的，由于X的Status+Nav高度增加，我们1242*192(@3X)的背景图会被等比例拉伸至这两块区域并且剪辑多余部分。如图：

2、屏幕底部

访问主屏幕的指示灯区域如图

屏幕底部的虚拟区，替代了home键，高度为34pt。

指示灯区域是一个带着系统功能的内容显示区域，这就意味着它可以展示你内容；同时如果你的底部是TabBar，那么指示灯区域背景会来自于TabBar背景的延伸；如果我们是一个feed流的页面，底部则会展示次屏feed流的局部。

鉴于圆角、传感器、指示灯区域的影响，iPhone X给出了设计布局的安全区意见：

iPhone X的安全区如下图所示

再考虑必要的NavgationBar、TabBar，主题内容显示的安全区需要根据设计需求进行考虑。根据实际需要，我们添加的所有空间都应当在安全区内，如各类型的Button、EditMenu、Pickers、Sliders等等。

所有的控件都应放置在安全区域内。

在适配过程中我们需要注意以下几点：

1、注意你的内容不要被圆角货传感器遮挡或裁切

2、注意StatusBar的高度