本文转载至 http://blog.csdn.net/yongyinmg/article/details/41422873 原文:http://www.zcool.com.cn/article/ZMTE0MjMy.html 有幸在9月25日拿到了iP6和iP6 Plus的真机,恰好又要做适配APP的工作(从iphone5上适配到iphone6和ip6 plus上),所以在真机上研究了下苹果官方在不同分辨率下对系统APP所做的适配.同时在网上也没找到相关的真机对比截图说明什么的,又有朋友问我要IP…

iPhone6和iPhone6 Plus上市有一段时间了.尽管大陆没有首发令人隐隐作痛,可是还是为iPhone6和iPhone6 Plus的设计的转变和大屏时代感到欣喜. 今天主要来mark下面通过xib方式来适配iPhone6和iPhone6 Plus的屏幕. 1.iPhone5分辨率320x568.像素640x1136,@2x 2.iPhone6分辨率375x667,像素750x1334.@2x 3.iPhone6 Plus分辨率414x736,像素1242x2208,@3x,(注意,在这个…

iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸 设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度 iPhone6 plus设计版 1242×2208 px 401PPI 60px 132px 146px iPhone6 plus放大版 1125×2001 px 401PPI 54px 132px 146px iPhone6 plus物理版 1080…

先对比所有市面上的iPhone设备,然后分析如何适配新的设备,   iPhone4,iPhone4s 分辨率960*640  长宽比1.5iPhone5,iPhone5s  分辨率1136*640  长宽比1.775iPhone6 分辨率1334*750  长宽比1.778iPhone6+ 分辨率1920*1080  长宽比1.777   由此可见,只有iPhone4和iPhone4s和iPhone5及以上设备的长宽比不一样,可以粗略认为iPhone5.5s.6.6+的长宽比是一样的,可以等比例…

http://www.ui.cn/detail/26980.html 根据上面说的,iphone6 plus的屏幕的编程时的宽度应该是414,我理解的也是这样,但是我用iphone6 plus 模拟器调试时,发现屏幕的宽度是320!十分不理解,找个真机测测!…

1.     文档综述 自iphone6/6+发布,ios屏幕分辨率的种类一下从2种变成了四种.对于以前很多手写UI,并且使用绝对坐标的UI,可能会发生异变,本文主要介绍在纯手写UI条件下,ios应用界面适配的一些经验了. 2.     iphone分辨率px, pt与ppi,以及@3x 老生常谈的一个问题了.但是随着iphone6+的引入,局面有了新的变化.首先介绍一张表,本章后续内容围绕此表展开: 手机 pt px ppi iphone4/4s/ 320x480 640x960 iphone…

本文转载至 http://jingyan.baidu.com/article/8cdccae97a5c2b315413cda9.html 1 2 3 4 5 6 7 分步阅读 随着苹果公司持续推出新产品,480x960的固定坐标时代悄然过去,iPhone6.iPhone6 plus的问世,无疑给了我们这些做iOS开发的,深刻的打击.坐标再也不能写成固定坐标了,但是随着发展AutoLayout和SizeClass的出现,无疑是一种福音,值得庆贺一点的是,iPhone6也好6plus也好,屏幕比例和…

问题:可能开始适配iPhone6和iPhone6 plus的朋友很快就发现,模块器头部和底部会出线一条黑线.但是在其他模拟器完全没有问题.程序也能正常跑.如下图 很清楚的看到头部有一条黑线. 解决办法: 解决办法就是只要把这些启动的时候显示的图片补上了,就可以了.…

在网页中,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,设备高度为480px iPhone5的分辨率为640*1136 pixels,DPI依然是320*568,设备高度为568px iPhone…

来源:http://www.phptext.net/article_view.php?id=387 ------------------------------------------------------------------------------------------------ 文章摘要:最近接触到一个项目由于客户要求的比较~~所以也参与了下,结果晋级了一下~~来和大家分享~~ 现在满大街的APP,除了游戏,软件图形类的需要用原生开发好点.现在大多还是基于WEBAPP或者混合的hy…

做iphone6和plus适配时候发现一个问题,先来看图(一下讨论所有在真机下完毕,非模拟器) 128*750图片是  nav@2x.png watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRm9saXNoX0F1ZGk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> 1242*192图片是 nav@3x.png…

看到这个题目你可能不信,引出这个问题的缘由是几次项目中Chrome模拟器和iPhone6真机预览效果不一致. 为什么在Chrome Emulation模拟手机页面和真机预览效果不一致? 以前觉得不外乎两个原因: 1.某些机型或浏览器对一些CSS属性不支持. 2.某些设备不支持12px以下字体. 今天要补充的第3个原因是对于iPhone手机还会与手机系统设置的显示模式.设备硬件有关. 下面开始讨论iPhone6/iPhone6 Plus的设备屏宽,这里说的设备屏幕宽度专指设备物理显示尺寸(devi…

Apple从iOS6加入了Auto Layout后开始就比较委婉的开始鼓励.建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在心底还坚守着固定布局的老传统思想. 随着iPhone6.iPhone6 Plus的到来,使用自适应布局更是迫在眉睫的事,固定布局的老传统思想脆弱的不堪一击.现在的iPhone有4种尺寸,如果算上iPad,现在Apple的iOS设备有5种尺寸.我们在准备使用自适应布局设计应用界面之前,可以把这5种尺寸划分…

译者的话:本文是自适应布局的巩固篇,所以对布局约束的添加操作步骤等没有详细的说明.如果看着吃力的话请先移步Swift自适应布局(Adaptive Layout)教程. Apple从iOS6加入了Auto Layout后开始就比较委婉的开始鼓励.建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在心底还坚守着固定布局的老传统思想. 随着iPhone6.iPhone6 Plus的到来,使用自适应布局更是迫在眉睫的事,固定布局的老传统…

译者的话:本文是自适应布局的巩固篇,所以对布局约束的添加操作步骤等没有详细的说明.如果看着吃力的话请先移步Swift自适应布局(Adaptive Layout)教程. Apple从iOS6加入了Auto Layout后开始就比较委婉的开始鼓励.建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在心底还坚守着固定布局的老传统思想. 随着iPhone6.iPhone6 Plus的到来,使用自适应布局更是迫在眉睫的事,固定布局的老传统…

转载出处:http://blog.xoneday.com ios应用程序是一个图像主导的产品.在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x尺寸和一个@2x尺寸.这样你的应用看上去才足够精美.但缺点是你必须单独生成这些文件.随着iphone6和iphone6 Plus的到来,这个问题变得更加让人头疼:@3x 资源. 幸运的是,苹果在xcode6中提供了一些伟大的工具来管理这些资源.更好的是,这种方式也让你的应用程序能够运行在未来的ios设备上打下了基础.工具之一是…

摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Retina对图像设计(图标.启动画面和其它所有像素有关的东西)有什么影响呢?如果我们的app要支持Retina,就要提供高分辨率的(宽x2,高x2)的图片.同时,为了支持没有Retina的设备,仍旧要准备低分辨率的版本. 换言之,我们要准备两套设计图. 针对不同分辨率的图片,苹果规定了一个命名规范:假…

转:http://blog.csdn.net/phunxm/article/details/42174937 目录(?)[+]   1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.3…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

原文网址:http://blog.csdn.net/phunxm/article/details/42174937 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches…

1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-inch 320x480 @2x 640x…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

  通用的Storyboard 通用的stroyboard文件是通向自适应布局光明大道的第一步.在一个storyboard文件中适配iPad和iPhone的布局在iOS8中已不再是梦想.我们不必再为不同尺寸的Apple移动设备创建不同的storyboard文件,不用再苦逼的同步若干个storyboard文件中的内容.这真是一件美好的事情. 我们打开Xcode,新建一个项目: 选择iOS\Application\Single View Application创建一个单视图应用: 设置项目名称Ada…

曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢慢的到了有了统一的技术方案去落地实现. 从手写不同尺寸的媒体查询css到以手淘的flexible.js来进行移动端的适配,虽然过程曲折,不过效果也是十分的显著,因为有了成熟的体系以后.什么东西就有据可寻,适配也就没那么困难了. 但是,因为这次引入了高德地图,所以在适配上出现了一点意料之外的问题. 首…

原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5…

目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点 虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备.看看下图你就会知道,这是多么痛苦的一件事情: 再来看看手淘H5要适配的终端设备数据: 看到这些数据,是否死的心都有了,或者说为此捏了一把汗出来. 手淘团队适配协作模式 早期移动端开发,对于终端设备适配问题只属于Android系列,只不过很多设计师常常忽略An…

九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多说,今天就来谈谈移动端的rem适配...本文将从rem是什么.为什么要用rem适配.怎么用rem来讲解,保证浅显易懂... 1.什么是rem rem(font size of the root element)是指相对于根元素(<html>)的字体大小的单位.简单的说它就是一个相对单位.看到rem…

iPhone屏幕尺寸.分辨率及适配 转载http://m.blog.csdn.net/article/details?id=42174937 1.iPhone尺寸规格 iPhone 整机宽度Width 整机高度Height 对角线Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI(对角线point/inch) 3GS 2.40 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 (3:…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种布局一般都是宽度自适应高度写死,显的很不协调,另外对设计也有很大的限制,另外还有兼容性方面的问题. 3. 响应式布局:说白了就是利用CSS3中的Media Query(媒介查询),喊的很火,谁用谁知道,简直累死人不要命. 4. 设置viewport进行缩放:以320宽度为基准,进行缩放,最大缩放为3…