APP设计以IPhone6为基准如何才能适配iPhone6Plus和iPhone5_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
APP设计以IPhone6为基准如何才能适配iPhone6Plus和iPhone5
&&APP设计以IPhone6为基准如何才能适配iPhone6Plus和iPhone5
阅读已结束，下载本文需要
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
加入VIP
还剩3页未读，
定制HR最喜欢的简历
你可能喜欢内容字号：
段落设置：
字体设置：
精准搜索请尝试：
软媒旗下产品下载
iPhone之家最新
软媒旗下软件：
友情链接（QQ：734121）
||||||||||||||||||||||
IT之家，软媒旗下科技门户网站 - 爱科技，爱这里。
Copyright (C) , All Rights Reserved.iOS的APP在系统中如何适应iPhone5s/6/6Plus三种屏幕的尺寸?- 百度派
{{ mainData.uname }}
：{{ mainData.content }}
{{ prevData.uname }}
：{{ prevData.content }}
{{ mainData.uname }}
：{{ mainData.content }}
0 || contentType !== 1" class="separate-line">
：{{ item.content }}
iOS的APP在系统中如何适应iPhone5s/6/6Plus三种屏幕的尺寸?
问题说明（可选）：
扫一扫分享到微信
----------------------------------------初代iPhone2007年，初代iPhone颁布，屏幕的宽高是320x480像素。下文也是根据宽度，高度的次序分列。这个辨别率不停到iPhone3GS也保持稳固。当时编写iOS的App(应用...
&&&&----------------------------------------&&&&初代iPhone&&&&2007年，初代iPhone颁布，屏幕的宽高是320x480像素。下文也是根据宽度，高度的次序分列。这个辨别率不停到iPhone3GS也保持稳固。&&&&当时编写iOS的App(应用步伐)，只支持绝对定位。比如一个按钮(x,y,width,height)=(20,30,40,50)，就表现它的宽度是40像素，高度是50像素，放在(20,30)像素的位置。&&&&iPhone4&&&&2010年，iPhone4颁布，率先采取Retina表现屏，在屏幕的物理尺寸稳固的环境下，像素成倍增长，到达640x960像素。&&&&如许就出现一个题目，怎么让原有的App运行在新的手机上面？iPhone手机一个上风，便是有浩繁良好的App，倘若不兼容原有的App，就相称于放弃这个得来不易的上风，是很不明智的。&&&&每当iPhone的屏幕有所变革，比如iPhone3GS过渡到iPhone4,iPhone4过渡到iPhone5,iPhone5过渡到iPhone6，苹果公司都必要想步伐来办理上述的兼容题目。&&&&为了运行之前的App，引入一个新的见解point(点)。点这个见解在iOS开辟中非常紧张，而实际用户很少存眷。iPhone4屏幕尺寸连续保持320x480，不过单位并非是像素，而是点。&&&&这篇文章中，我将点和像素当成一维的长度单位，而非二维的面积单位，如许对付我来说更天然些，因此1个点便是2个像素。别的文章中大概会说1个点便是4个像素，着实是指1个点占据了4个像素的面积，如许也没有说错，细致上下文语境。&&&&iPhone4和iPhone3GS的屏幕尺寸实际上是一样的，都是3.5英寸。同样一个点，实际尺寸看起来是一样的。只是iPhone4在单位英寸上像素更多，看起来更精致。&&&&开辟iOS的时间，利用点作为根本单位会越发方便。列表比拟&&&&这里的屏幕模式可以开端明白成，一个点便是多少个像素。2x，便是1个点便是2个像素。这里的屏幕模式可以开端明白成，一个点便是多少个像素。2x，便是1个点便是2个像素。&&&&总结一下单位&&&&手机屏幕的物理长度，利用英寸作为单位。比如iPhone4屏幕是3.5英寸，iPhone5是4英寸，iphone6是4.7英寸，这里的数字是指手机屏幕对角线的物理长度。&&&&屏幕像素，比如iPhone3GS屏幕是320x480像素，iPhone4是640x960像素，这里的像素可以想象成屏幕上真正用来表现颜色的发光小点。&&&&点，开辟App时间利用的单位，是一个假造的单位，并非实际存在的，因此点偶然也叫假造点。点这个单位，用于屏蔽各个屏幕配置的差别，兼容过去的步伐。&&&&每英寸有多少个像素，称为ppi(pixelperinch)。iPhone4的屏幕是640x960像素，3.5英寸，你和我没有宽高的实际尺寸，就根据对角线来大抵谋略它的ppi。将像素当做长度单位，根据勾股定理，对角线便是1154像素。屏幕对角线的实际长度为3.5英寸，也便是1154像素除以3.5英寸，得出330ppi。而官方给出的数字是326ppi。当像素太密，高出300ppi的时间，人眼也就不克不及区分出每个像素。因此iPhone4的屏幕叫作Retina表现屏。Retina在英文中，是视网膜的意思。&&&&iPhone4之后(x,y,width,height)=(20,30,40,50)，就表现高度为40个点，宽度为50个点，放在(20,20)个点的位置。这种处理惩罚要领，将之前以像素作为单位主动转换成以点作为单位，使得iPhone3GS的应用步伐，不消修改也可运行在iPhone4上面。&&&&笔墨，颜色等是矢量数据，放大不会失真。原有的iPhone3GS步伐，在iPhone4上面运行，笔墨表现也非常清楚。&&&&而图片并非矢量数据，处理惩罚方法有所差别。假设图片example.png，大小为30x40像素（这里的单位是像素，数字图片的单位通常都为像素）。当这张example.png在iPhone3GS和iPhone4中利用时间，都占据屏幕上30x40个点。而由于iPhone4中1个点便是2个像素，也便是30x40像素的图片，占据了60x80像素的屏幕，因此这图片在iPhone4中看起来就会含糊。&&&&开辟的时间，为使得图片清楚，必要举行图片适配。这时必要准备两张内容雷同的图片，放在同一目次下。&&&&example.png//30x40像素example@2x.png//60x80像素当步伐中利用example.png的时间，会根据屏幕模式主动选择对应的图片。屏幕1x模式，就会选择example.png,2x模式就会优先选择example@2x.png，倘若example@2x.png不存在，就选择example.png。&&&&图片跟屏幕一样，也有1x模式，2x模式。在iPhone6Plus中，还出现3x模式，原理是一样的。&&&&当iPhone4选中example@2x.png的图片，就会天生一张大小为30x40个点，2x模式的图片。这个时间，图片看起来就会很清楚了。而没有适配的旧步伐，example@2x.png不存在，就选中example.png，天生大小为30x40个点，1x模式的图片，看起来比较含糊。但它们占据的屏幕点数是一样的。&&&&iPhone5&&&&2012年，苹果颁布iPhone5。你和我将全部机型比拟，依然采取点作为单位。&&&&跟iPhone4做比较,iPhone5的宽度保持稳固。高度增长568-480=88个点。&&&&在iOS开辟中，44这个数字比较特别。iOS界面指南写着，人类的手指有肯定大小，点击地区低于44个点的时间，就难以点中。44的两倍便是88。&&&&当原有步伐没有适配iPhone5的时间，也可以正常运行，但多出来的88个点将会将会被主动均分为上下两部分，使得上下出现黑边。我找不到好看标图片。&&&&那么怎样才华报告iOS体系，应用步伐已经适配了iPhone5呢？在这里，你和我先扯开一下，谈一下启动图片。&&&&点击主屏幕的图标，进入App的时间，会立即表现一张图片，这张图片便是启动图片(LaunchImage)。App在正式启动的时必要做一些初始化处理惩罚，这通常比较费时。先出现启动图片，可以利用户以为体系立即有相应，淘汰等待的发急感。&&&&每个机型，比好像时支持iPhone和iPad的步伐，必要分别为iPhone跟iPad指定启动图片。当旧的iPhone4的步伐，运行在iPhone5上面，没有iPhone5的启动图片，就采取兼容模式，上下留黑边。当为iPhone5指定了新的启动图片，体系就以为这个应用步伐是已经适配了iPhone5的，上下就不会留黑边了。下面是微信启动图片，应该都很熟习了。&&&&微信的启动图，为适配iPhone5，相比与iPhone4,很明显狭长了。&&&&典范iPhone应用步伐（游戏除外），很多是上面一个导航栏，下面一个东西栏大概标签栏,中间一大块用于表现的内容区。iPhone5拉长了，对付步伐的适配，也不算贫苦，内容区的内容根本是动态天生的。适配时间可以大略上下稳固，中间的内容区拉长就行了。细致，导航栏和东西栏的高度也是44个点。下面是同一步伐，在iPhone4跟iPhone5的比拟。&&&&AutoLayout到了这个时间，传统绝对定位的缺点就显暴露来了。这时iPhone根据点作为单位，已经出现了两种差别尺寸的屏幕，算上iPad,就有3种尺寸（有些App可以同时兼容iPhone和iPad，称为Universal）。&&&&从iOS6体系颁布后，iOS开辟中可以采取一种AutoLayout的技能。AutoLayout就像网页一样，指定View，Button，Text之间的相对位置，比如靠左多少，靠右多少，居中多少等等。举个例子，像下面的大略布局。&&&&假设左上角的地区为view1,右上角的地区为view2,下面的地区为view3。AutoLayout会说:&&&&view1.left=20//View1的左边间隔边界20个点view1.top=20//View1的上边间隔边界20个点view2.right=20//View2的右边间隔边界20个点view2.top=20//View2的上边间隔边界20个点view2.left=view1.right+20//View2的左边间隔View1右边20个点view2.width=view1.width//View1的宽度便是View2的宽度view2.height=view1.height//view1高度便是view2高度view3.left=view1.left//view3的跟view1左对齐view3.right=view2.right//view3跟view2右对齐view3.top=view1.bottom+20//view3的上边间隔view1下边20个点view3.bottom=20//view3下边间隔边界20个点view3.height=view1.height//view3高度便是view1高度&&&&指定上面的束缚条件后，AutoLayout就会主动算出对应的布局。上面我写得比较繁琐，究竟上很多操纵都是可以利用鼠标拖沓来指定的，并不肯定必要利用代码。但就算用代码，也有简写的要领。下面是在xib中，拖沓鼠标指定束缚时的界面。&&&&而绝对定位，会直接说&&&&view1.frame=(x1,y1,width1,height1)view2.frame=(x2,y2,width2,height2)view3.frame=(x3,y3,width3,height3)&&&&绝对定位并非指定束缚条件，而是开辟者本身来正确指定View，Button,Text等的实际坐标大小。&&&&对付一个屏幕，绝对定位大概跟AutoLayout的区别不算大，乃至绝对定位会更方便些。但当必要同时适配多个屏幕，AutoLayout底子不必要变动。而绝对定位就必要根据屏幕大小，一个个算出来。比如横屏，在AutoLayout下面，就主动变成。&&&&这里不过是3个控件的布局，当出现的控件数越多，屏幕尺寸越多，AutoLayout的上风就显暴露来了。别的AutoLayout有个长处是容易支持多语言，差别语言下，同一个意思笔墨的长度是差别的，利用AutoLayout也可以主动适配。&&&&在iOS6的时间，AutoLayout还比较少人利用，当时屏幕尺寸还比较少。iOS7的时间，就开始很多人利用了。而到如今iOS8了,越发上iPhone6,iPhone6Plus必要适配，AutoLayout局面所趋，不消不可了。&&&&iPhone6,iPhone6Plus2014年，iPhone6,iPhone6Plus颁布后，环境又有新的变革。再次比较全部iPhone机型。&&&&屏幕尺寸再度破裂。但是你和我比较iPhone5跟iPhone6的宽高比例。屏幕尺寸再度破裂。但是你和我比较iPhone5跟iPhone6的宽高比例。可以看出，iPhone6跟iPhone5固然屏幕尺寸变化了，但是它们的比例是稳固的。都是9÷16=0.5625的屏幕。&&&&当旧的iPhone5步伐运行在iPhone6上面，倘若没有颠末适配。旧步伐主动等比放大，铺满新手机，旧步伐也可以正常运行。这种方案可算是主动适配。但由于旧步伐拉伸了，团体看起来有点虚，也不克不及更好利用大屏空间。&&&&当必要开辟者手动适配的时间，跟iPhone4过渡到iPhone5一样，在新步伐中，指定一张新的启动图片。当指定了启动图，屏幕辨别率就已经变成应有的大小，这时间利用AutoLayout举行布局，同一份代码，就可以支持多个机型。新手机的屏幕更大，有更多的假造点，可以表现更多的内容。&&&&值得细致一点是，iPhone6Plus。它的宽高是414×736个点，3x模式，抱负上来说，应该有像素。但iPhone6Plus的实际像素是，是比抱负值要少一点的。iPhone6Plus的处理惩罚方法是将步伐团体轻微缩小一点。辨别率很高，这点区别，实际上也看不出来。&&&&那为什么必要如许做呢？上面表格中iPhone6,iPhone6Plus屏幕宽高的逻辑点的数字是怎么来的？下面我推测一下缘故起因，但不克不及证明。&&&&先看iPhone6，这个比较大略。iPhone6的屏幕宽高比例跟iPhone5一样，利用对角线来谋略，便是放大了4.7÷4=1.175倍。用这个数字，乘以iPhone5的320x568个点，马虎偏差，差未几便是iPhone6屏幕的375x667个点。这里必要细致，屏幕宽高比例一样，才华利用对角线来谋略。&&&&根据上面的方法来谋略iPhone6Plus,应该是得到440x781个点，实际上倒是414×736个点。这里我推测是由于，iPhone6Plus屏幕明显更大，雷同尺寸的点放在大的屏幕上面，会使得人以为尺寸变小，以是就将每个点的实际尺寸放大一些，从而得到更少的点数量。人眼看东西会有种错觉，并非是孤独的看的，而是跟四周的环境作比较。&&&&确定了点数量之后，再确定了像素(很多高清电视便是这个尺寸)，应该是.6x，但2.6x这个数字开辟就太贫苦了，就根据3x来处理惩罚。着实倘若像素到达，3x下也可以正确到1:1,如许会更好。但现今的技能在思量电池，处理惩罚器，屏幕尺寸等综合因素下，很大概达不到如许的精致程度。&&&&上述只是推测，我信托那些手机参数是颠末重复思量再确定的。iPhone6Plus这个处于手机跟平板中间地带的产品颠末不少特别处理惩罚。&&&&由阐发可以看到，渐渐的为了适配多个机型，步伐的启动图片也渐渐增多，为办理这个题目。iOS8之后，可以利用xib来搭建启动界面，如许就可以同一个启动界面，适配多个机型，淘汰启动图片占用的空间。&&&&发起以后的应用步伐，都利用AutoLayout,不要再用绝对定位。&&&&利用雷同网页的方法来计划界面。&&&&计划师好，步伐员也好，只管即便利用点这个单位举行思索，而不要利用像素。比如，你必要做44x66个点的按钮，2x模式，就乘以2,3x模式就乘以3。如许的思索方法可以大抵预计到真实的物理长度。44个点，便是手机上导航栏，东西栏的高度。倘利用像素思索，容易使得做出的图片过大大概过小。&&&&非矢量素材，就可以做尺寸最大的，之后再举行缩小。比如你必要兼容3x的屏幕，就直接做最高那种图片。&&&&而当利用Flash之类的矢量东西来做素材的时间，应该直接做点那个尺寸。比如44x66个点的按钮。就创建一个44x66的场景。之后再导出成2倍图，3倍图，由于矢量放大不失真。不要创建一个3x的场景，导出成大图片，再举行缩小，如许就容易失真。更抱负的是直接利用矢量图。&&&&倘若是那种导航栏，东西栏之类的背景图，必要高出整个屏幕。可以只切一小块，让步伐拉伸，拉伸方法是保持两边的像素不动，只拉伸最中间的一列像素。必要拉伸的话，横方向就不要出现一些渐变色。&&&&按钮的点击地区，不该该少于44个点，就算按钮的图片看起来比较小，也应该使得点按钮四周的透明区也有反响。&&&&可以根据你当前最方便测试机子的型号来做一些重要预览图，结果图。比如你手头有iPhone5，可以根据iPhone5的尺寸，320x568个点，必要兼容iPhone6Plus，就利用3x的模式。如许方便将图片放进手机内里看实际的结果。有多个测试机，就选较大的，之后再举行一些细调。倘若支持iPhone6Plus的横屏模式，必要别的处理惩罚。&&&&上面说的是应用的处理惩罚方法，游戏会有些特别。如今很多游戏，根据的像素尺寸来计划场景，如许可以同时兼容iPad和iPhone，并只利用一份图。iPad1x模式下尺寸是像素，iPhone5在2x模式下，是像素。这种尺寸，可以将场景居中表现，各自将场景拉伸到最大。
扫一扫分享到微信
提问{{title}}
iOS的APP在系统中如何适应iPhone5s/6/6Plus三种屏幕的尺寸?
，才能进行回答
一个问题只能回答一次，请&nbsp点击此处&nbsp查看你的答案
提问{{title}}
1人关注了此问题随笔- 120&
&&&&&&&&&&&
在网页中，pixel与point比值称为device-pixel-ratio，普通设备都是1，iPhone 4是2，有些Android机型是1.5。]那么-webkit-min-device-pixel-ratio:2可以用来区分iphone(4/4s/5)和其它的手机iPhone4/4s的分辨率为640*960 pixels，DPI为是320*480，设备高度为480pxiPhone5的分辨率为640*1136 pixels，DPI依然是320*568，设备高度为568pxiPhone6的分辨率为750*1334 pixels，DPI依然是375*667，设备高度为667pxiPhone6 Plus的分辨率为 pixels，DPI依然是414*736，设备高度为736px那么我们只需要判断iphone手机的device-height(设备高)值即可区别iPhone4和iPhone5、iPhone6、iPhone6 Plus使用css通过 CSS3 的 Media Queries 特性，可以写出兼容iPhone4和iPhone5、iPhone6、iPhone6 Plus的代码~~方式一，直接写到样式里面
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
方式二，链接到一个单独的样式表，把下面的代码放在&head&标签里
&link rel="stylesheet" media="(device-height: 480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" /&
&link rel="stylesheet" media="(device-height: 568px)and (-webkit-min-device-pixel-ratio:2)" href="iphone5.css" /&
&link rel="stylesheet" media="(device-height: 667px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6.css" /&
&link rel="stylesheet" media="(device-height: 736px)and (-webkit-min-device-pixel-ratio:2)" href="iphone6p.css" /&
//通过高度来判断是否是iPhone 4还是iPhone 5或iPhone 6、iPhone6 Plus
isPhone4inches = (window.screen.height==480);
isPhone5inches = (window.screen.height==568);
isPhone6inches = (window.screen.height==667);
isPhone6pinches = (window.screen.height==736);
阅读(...) 评论()这个页面不在了}