> 博客详情
iPhone 6 Plus (@3x)
iPhone 6 and iPhone 5 (@2x)
iPhone 4s (@2x)
iPad and iPad mini (@2x)
iPad 2 and iPad mini (@1x)
App icon for the App Store
1024 x 1024
1024 x 1024
1024 x 1024
1024 x 1024
1024 x 1024
Launch image
1242 x 2208 (portrait) 2208 x 1242 (landscape)
For iPhone 6, 750 x 1334 For iPhone 5, 640 x 1136
1536 x 2048 (portrait) 2048 x 1536 (landscape)
768 x 1024 (portrait) 1024 x 768 (landscape)
Spotlight search results icon
Settings icon
Description
Size for iPhone 5 and iPod touch (5th generation)
Size for high-resolution iPhone and iPod touch
Size for iPhone and iPod touch
Size for high-resolution iPad
Size for iPad
App icon for the App Store
1024 x 1024 (recommended)
1024 x 1024 (recommended)
1024 x 1024 (recommended)
Launch image
640 x 1136
1536 x 2008 (portrait) 2048 x 1496 (landscape)
768 x 1004 (portrait) 1024 x 748 (landscape)
Small icon for Spotlight search results and Settings
100 x 100 (Spotlight search results) 58 x 58 (Settings)
50 x 50 (Spotlight search results) 29 x 29 (Settings)
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720xx1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x34, 。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。
所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。
Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
倍率与逻辑像素
再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。
在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。
在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。
由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。
Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。
如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：
ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]
各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据：
就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：
ldpi 如今已绝迹，不用考虑
mdpi [320x480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）
hdpi [480x800、480x854、540x960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位）
xhdpi [720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位）
xxhdpi []（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）
xxxhdpi []（极少数2K屏手机，比如Google Nexus 6）
自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。
不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。
不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。
单位之间的换算关系随倍率变化：
1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone 6）
4倍：1pt=1dp=4px（xxxhdpi）
单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。
无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。
移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。
可以通过这个测试页面&&来看看你的移动设备屏幕宽度，这是逻辑像素宽度。
以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。
大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。
之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。
要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？
首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。
再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。
现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。
下面来看看3个平台各自的画布设置：
iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。
从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。
按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。
不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。
都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。
对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。
当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。
手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。
这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。
如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。
移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥主题 : iphone6启动图片如何适配呢
级别: 新手上路
可可豆: 0 CB
威望: 2 点
在线时间: 24(时)
发自: Web Page
iphone6启动图片如何适配呢&&&
xcode升级到了6.0.1 用里面的iPhone6模拟器运行了 &好像都正常的 未添加新的
刚刚看到这个帖子 &还是有些不明白
/bbs/read.php?tid=229352&page=1
iOS 8 更新：
&&&& 87*87
&&&&&&&&&& 120*120
&&&&&&&&&& 180*180
4.7 inch screen:&
&(750x1334 ~ for iPhone 6)
---命名是&么？
5.5 inch screen:&
&( ~ for iPhone 6 Plus Portrait)
1.我没有使用Use Asset Catalog和Launch screen.xib&
是不是我将如上图片直接放到工程就好了？还是必须要用Launch screen.xib&？
谢谢
级别: 新手上路
UID: 387654
可可豆: 2 CB
威望: 4 点
在线时间: 20(时)
发自: Web Page
XCode6下面, 'Launch Screen File'设置为xib, 则可以用一个VC当做Launch S 设置为空, 则会用'Launch Image Source'中选择的image set, 选一个添加好的LaunchImage就可以了, 跟6之前是一样的.
级别: 新手上路
可可豆: 0 CB
威望: 2 点
在线时间: 24(时)
发自: Web Page
谢谢。我这里'Launch Screen File是空的 ，并且Launch Image Source里没有用Use Asset Catalog，这种情况下添加Default-667h@2x.png 等图片到Supporting Files下 这样行吗？还是要上面两种方式二选一呢
级别: 新手上路
UID: 387654
可可豆: 2 CB
威望: 4 点
在线时间: 20(时)
发自: Web Page
应该是不行的, 那样的话没地方指定应该用哪组图片.
级别: 新手上路
可可豆: 1 CB
威望: 1 点
在线时间: 54(时)
发自: Web Page
为什么我的在模拟器上都有启动图，但是在touch上就不会出现了呢
级别: 新手上路
可可豆: 1 CB
威望: 1 点
在线时间: 54(时)
发自: Web Page
为什么我的在模拟器上都有启动图，但是在touch上就不会出现了呢
级别: 骑士
UID: 212931
可可豆: 403 CB
威望: 367 点
在线时间: 965(时)
发自: Web Page
好像解决不了诶，就算加了图片也还是不行
级别: 侠客
UID: 299649
可可豆: 443 CB
威望: 350 点
在线时间: 242(时)
发自: Web Page
楼主问题解决了吗？我的程序现在运行在6p上面是放大的模式，并没有适配。我尝试了只使用Use Asset Catalog不行，只使用Launch Screen.xib不行，只添加图片到工程中不行，改名字为不行，然后又分别尝试了两两结合，三个一起使用，都不行。实在不知道为什么会这样！捉急啊～
级别: 新手上路
可可豆: 10 CB
威望: 10 点
在线时间: 29(时)
发自: Web Page
回 7楼(繁星春水) 的帖子
同样的问题，不知道怎么弄了
级别: 骑士
UID: 448091
可可豆: 486 CB
威望: 472 点
在线时间: 698(时)
发自: Web Page
两种都放啊。这样都能适配了。现在是这样的。以前好像只能选一种，只有一种起作用，现在都起作用。设置那里两种都有就好了。LaunchImage四张，尺寸一个像素不能错哈。Launch Screen 随便来一张，建议还是ios8.0.只用Launch Screen就好了。谁还用7.0.。
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版Xcode 6 LaunchImage 载入界面标准尺寸 - 吕滔博客
Xcode 6 LaunchImage 载入界面标准尺寸
&3653&次浏览
iPhone Portrait iOS 8-Retina HD 5.5 （） @3x
iPhone Portrait iOS 8-Retina HD 4.7 （750×1334） @2x
iPhone Portrait iOS 7,8-2x （640×960） @2x
iPhone Portrait iOS 7,8-Retina 4 （640×1136） @2x
iPhone Portrait iOS 5,6-1x （320×480） @1x
iPhone Portrait iOS 5,6-2x （640×960） @2x
iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x
扫一扫支付
评论数： 27
评论数： 20
评论数： 19
评论数： 14
评论数： 11
评论数： 10
评论数： 9
评论数： 8
评论数： 8
评论数： 7
Hello! This post could not be w...
你好，yaf怎么使用循环输出数据到模板中
为什么我的没有mvn命令，而且setting.xml文件是在 ...
请问pid怎么用
请问你这个pid是哪里的
一般台式机速度从来都没有低于100MB/S，服务器做RAID5...
牛人，学习了，致敬。
lvm2-monitor
0:off 1:on 2:on...
你好我想问问，我启用插件后 就显示Server Error ，...
最厉害的方法
评论数： 0
评论数： 0
评论数： 0
评论数： 0
评论数： 0
评论数： 0
评论数： 0
评论数： 7
评论数： 0
评论数： 0Ios8&Xcode6&设置Launch&Image&启动图片
设置Launch
Image 启动图片/
如何设置App的启动图,也就是Launch Image?
如果你觉得你开启太快,那么漂亮得LaunchImage还没怎么展示就跳过了.你可以在你的第一个加载页面中添加如下代码来延长LaunchImage的显示时间.
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。AppIcon&,Launch&Image&xcode&设置
一般App都会有启动页。那么今天记录一下，启动页的相关设置以及信息。
一、启动页：启动页设置是有size的需求的。系统会根据size的大小，辨别适配的是哪个型号的机器。例如：想要6 plus
显示的App的状态栏的显示不被拉伸放大。那么要求我们启动页必须是1242 x 1108
。这样添加以后。状态栏就会转为正常字体大小的显示了。
AppIcon 的size 可以具体参照下面的文档：
二、设置启动页的步骤：
三、对应的图片size 要拖拽到相应的框架内
iPhone Portrait iOS 8:
Retina HD 5.5 :1242 x 2208 (Default@3x)
Retina HD 4.7 :750 x 1134 (default@2x)
iPhone Portrait iOS7,8:
2x :640 x 960 (Default@2x)
Retina 4 : 640 x 1136 (Default - 568h@2x)
四、更加详尽的参考文档，包含图片命名以及大小。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}