[toc] 1 屏幕适配简介 1.1 屏幕发展历史 手机型号 |屏幕大小 | 分辨率 ------------ | ------------- 4, 4S |3.5 | 320480 5,5C,5S...6S 1.3 适配技术介绍 直接使用 frame 计算控件的位置 特点：程序中存在大量的 MagicNumber iPhone\ iPhone3G \ iPhone3GS \ iPhone4 \...iPhone4S 屏幕的物理尺寸是一样的(无需屏幕适配) 而且一个应用要么是横屏要么是竖屏, 几乎不存在能同时进行横竖屏切换的应用 应用程序都是竖屏 游戏几乎都是横屏 官方应用大多支持横竖屏 使用 Autoresizing...） 随着 iPhone5 \ iPhone5s 等的发布苹果设备不同尺寸的屏幕变得越来越多, 不仅要求能根据控件父子 关系来设置相对位置，也要求能根据任意控件之间的关系来设置位置因为 Autoresizing...通过 Size Classes + Auto Layout 的方式, 可以为不同尺寸的屏幕设置不同的约束 举例: iPhone 下的计算器，在横屏、竖屏下的不同表现 Size Classes 技术主要解决的问题
要在HTML中实现响应式设计以适应不同设备的屏幕尺寸，可以使用CSS媒体查询和流动布局。...以下是实现响应式设计的一些关键步骤： 使用CSS媒体查询：CSS媒体查询允许根据屏幕尺寸和设备特性应用不同的CSS样式。...通过在CSS中使用@media规则，并指定不同的屏幕尺寸和样式，可以根据不同设备的屏幕尺寸来加载适当的样式。...and (min-width: 1025px) { /* 在屏幕宽度大于1025px时应用的样式 */ } 使用流动布局：流动布局允许元素根据屏幕尺寸自动调整大小和位置，以适应不同的设备。...通过将图像和文本包装在一个容器中，并使用CSS使其在不同设备上显示不同的布局，可以实现响应式的媒体对象。 通过结合使用这些技术和工具，可以实现在HTML中进行响应式设计以适应不同设备的屏幕尺寸。
触摸交互 屏幕尺寸繁多 屏幕大小 屏幕大小指屏幕的对角线的长度，单位一般是英寸。...常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。...最标准的 2K 分辨率为 2048×1024 几款手机的分辨率 型号 分辨率 IPhone 3GS 320 * 480 IPhone 4 / 4s 640 * 960 IPhone 5 / 5s 640...几款手机的屏幕像素参数,点击这里查看更多 型号 设备像素总和 设备独立像素总和 IPhone 3GS 320 * 480 320 * 480 IPhone 4 / 4s 640 * 960 320 *...移动端 放大时 布局视口不变 视觉视口变小 缩小时 布局视口不变 视觉视口变大 注意：移动端缩放不会影响页面布局 真机测试流程（重点） 真机测试是项目测试必要的一个流程，一定要掌握！！！
以下为iPhone4s的宽高示意图： 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸，指的是显示屏对角线的长度（diagonal）。...] == 3.0f) ——————————————————————————– 那么，同样的分辨率和scale，如何区分机型iPhone4与4s、iPhone5与5s呢？...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。...苹果在WWDC2012 iOS6中就已提出了Auto Layout的概念，即使用约束条件来定义视图的位置和尺寸，以适应不同尺寸和分辨率的屏幕。.../6 Plus》 《iOS的APP如何适应iPhone 5s/6/6+三种屏幕的尺寸？》
以下为iPhone4s的宽高示意图： 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸，指的是显示屏对角线的长度（diagonal）。...------------------------------------------------- 那么，同样的分辨率和scale，如何区分机型iPhone4与4s、iPhone5与5s呢？...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。...参考： 《iOS设备的屏幕尺寸、分辨率及其屏幕边长比例》 《iOS判断设备屏幕尺寸、分辨率》 《iOS8中的UIScreen》 《Detecting iPhone 6/6+ screen.../6 Plus》 《iOS的APP如何适应iPhone 5s/6/6+三种屏幕的尺寸？》
（近似） 比例（近似） 3GS 3.5 inch 163 ppi 320*480 pt 320*480 px @1x 1.5 2:3 4/4s 3.5 inch 326 ppi 320*480...iPhone 4的屏幕物理尺寸还是3.5寸，分辨率为640 × 960，提升了4倍。也就是说，原先的1 point可以容纳4个pixel。...下面拿iphone 6 plus详细分析： iphone6plus-物理尺寸分辨率 1、iPhone 6 Plus 的逻辑point分辨率用 360×640，也不是不可以，也即上面图表中的 iPhone...1 point = 1 pixel 后来在iPhone4中，同样大小（3.5inch）的屏幕采用Retina(视网膜)屏幕显示技术，横、纵向方向像素密度都被放大到2倍，像素分辨率提高到（320 * 2）...iPhone6Plus中横、纵向方向像素密度都被放大到3倍，屏幕分辨率提高到iPhone3GS的9倍。
大家好，又见面了，我是你们的朋友全栈君。 针对IOS，Android 手机分辨率大小、屏幕尺寸、开发尺寸的参考。 在实际页面的开发过程，往往显示屏幕的宽度换算为像素尺寸的1/2。...英寸 —— 640 x 960 px —— 4/4s iphone各个型号屏幕分辨率总结 Android： 现今的主流手机各类及分辨率： Android 手机分辨率： 320×480 320×...那样思考兼容Android平板电脑，对于苹果要考虑iPad、iPhone 3GS和iPhone 4等屏幕之间的兼容性，对于几乎所有的分辨率Android123总结了大约超过20中粉笔阿女郎的大小和对应关系...2.2 多屏幕适配的4条黄金原则 1) 在layout文件中设置控件尺寸时应采用fill_parent、wrap_content、match_parent和dp； 具体来说，设置view的属性android...2) 在程序的代码中不要出现具体的像素值，在dimens.xml中定义； 为了使代码简单，android内部使用pix为单位表示控件的尺寸，但这是基于当前屏幕基础上的。
以下为iPhone4s的宽高示意图： 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸，指的是显示屏对角线的长度（diagonal）。...] == 3.0f) ——————————————————————————– 那么，同样的分辨率和scale，如何区分机型iPhone4与4s、iPhone5与5s呢？...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。...苹果在WWDC2012 iOS6中已提出了Auto Layout的概念，即使用约束条件来定义视图的位置和尺寸，以适应不同尺寸和分辨率的屏幕。...的APP如何适应iPhone 5s/6/6+三种屏幕的尺寸？》
大家好，又见面了，我是你们的朋友全栈君。 从设计方面来看，做手机界面设计的尺寸一般分为iPhone和Android两种设备。...Android的常用逻辑分辨率： Android的常用逻辑分辨率：参考屏幕尺寸大全 360 * 640 、 360 * 720、 360 * 740、 360 * 760、 360 * 780、 360...* 800 411 * 731 480 * 853 iPhone的分辨率 设备 逻辑分辨率(point)(pt) 物理分辨率(pixel)(px) 屏幕尺寸(diagonal) 缩放因子(scale...) 像素密度 PPI 比例（近似） iPhone 2G / 3 / 3GS 320 x 480 320 x 480 3.5英寸 @1x 163 2:3 iPhone 4 / 4S 320 x 480 640...iPhone 12 Pro Max 428 x 926 1284 x 2778 6.7英寸 @3x 458 全新 iPhone 12 发布，再谈 iPhone 屏幕尺寸 屏幕尺寸 屏幕尺寸是指屏幕的对角线长度
目前iOS的手机屏幕的分辨率随着机型的变化样一直在变化，那么我们在做开发时要如何做好适配呢？这就需要我们了解更多的关于iOS开发过程中的尺寸相关的一些知识了。...以下为iPhone4s的宽高示意图： ? 3.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸，指的是显示屏对角线的长度（diagonal）。...(IS_IPHONE && [[UIScreenmainScreen] nativeScale] == 3.0f) 那么，同样的分辨率和scale，如何区分机型iPhone4与4s、iPhone5...从分辨率的角度来看，iPhone6沿用二倍图（@2x），但需为iPhone6+提供更高的三倍图（@3x）；从屏幕尺寸角度来看，需要重新对UI元素尺寸和布局进行适配，以期视觉协调。...10.UI相对布局 考虑到iPhone机型的多样性，不可能针对iPhone4(s)、5(s)、6、6+四种屏幕尺寸出四套视觉交互稿，也不要基于某一机型从上往下、从左往右给绝对标注，而应该关注subView
没有适配 iPhoneX的触底页面 旧工程如何在iphoneX全屏显示 只需要在LaunchImage中添加一个尺寸为1125 × 2436的启动图，并且工程使用LaunchImage加载启动图的，而不是使用...landscape是风景模式，也就是横屏 看一下各种iPhone尺寸屏幕的分辨率和宽高比 设备 屏幕尺寸 分辨率（pt） Reader 分辨率（px） 宽高比 iPhone 3GS 3.5吋 320x480...@1x 320x480 0.666 iPhone 4/4s 3.5吋 320x480 @2x 640x960 0.666 iPhone 5/5s/5c 4.0吋 320x568 @2x 640x1136...不做处理的话， iponeX上会出现变形，我们以宽的缩放比为正比缩放比，这样不管以后屏幕高度如何变化，都不会出现变形的情形。...> 如何实现在工程任何地方修改状态栏颜色的设置 info.plist中添加下面三项 UIStatusBarHidden UIStatusBarStyle
刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？...2、单位换算方法 android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。...（px=pt*ppi/72） iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px，屏幕密度是163ppi，4S的屏幕像素是640x960px，屏幕密度是326ppi，翻了一倍...，其高度为：88 px 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：734 px=960...-40-88-98 以上尺寸适用于 iPhone 4、4S，iPhone5/5s 的 640×11136 的尺寸，其实就是中间的内容区域高度增加到：910 px，其他尺寸也同上。
设备像素和 CSS 像素设备像素又称为 物理像素, 是 "物理屏幕" 上真实存在的发光点，只有屏幕一经出厂就固定不会改变。...CSS 像素又称为 逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素。...图片图片例如: iPhone3G / iPhone3GS 3.5英寸 / 逻辑像素 320 480 / 设备像素 320 480：图片iPhone4 / 4S 3.5英寸 / 逻辑像素 320 480...个物理像素, 但是后来一个改变世界的男人(乔布斯)改变了这一切~, 从 iPhone4 开始，苹果公司推出了所谓的 retina 视网膜屏幕。...iPhone4 的屏幕尺寸却没有变化，但是像素点却多了一倍，这就导致了在 1 个CSS个像素等于 1 个物理像素的手机上, 我们设置1个CSS像素只会占用 1 个物理像素，而在1个CSS个像素不等于1个物理像素的手机上
然而，联想到 iPhone4/4S 配置的 326ppi 分辨率的 Retina 屏幕，新 iPad 的屏幕究竟是不是“Retina 屏”引发了一些争议。 ? 那 Retina 屏幕究竟是如何定义的？...回到现实中来，Phil Schiller 显然没有乔布斯的魄力，而是很严谨的给出了这个公式：α＝2tan-1（h/2d）。 这个公式是如何得来的？.../4S 如果在10 吋（25.4 厘米）的距离上使用，并不是 Retina 屏（分辨率至少要达到 344ppi 才是，对于乔布斯“在 10-12 吋，300ppi是人类视觉极限”的说法，Phil Schiller...1/2） / size = （960 x 960 + 640 x 640） ^ (1/2) / 3.5 = 1331200 ^ (1/2) / 3.5 = 1153.776408148 / 3.5 = ...新iPad究竟是不是Retina屏 关于视网膜屏幕的非官方问答 Android的计量单位px,in,mm,pt,dp,dip,sp Android 获取屏幕尺寸与密度
大家好，又见面了，我是你们的朋友全栈君。 移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？...2、单位换算方法 android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。...（px=pt*ppi/72） iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px，屏幕密度是163ppi，4S的屏幕像素是640x960px，屏幕密度是326ppi，翻了一倍...，其高度为：88 px 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：734 px=...960-40-88-98 以上尺寸适用于 iPhone4、4S，iPhone5/5s 的 640×11136 的尺寸，其实就是中间的内容区域高度增加到：910 px，其他尺寸也同上。
初代 iPhone （2007） 多点触控屏幕 2G 网络支持 3.5 英寸屏幕 128MB 内存 200 万像素摄像头 iPhone 3G（2008） 3G 网络支持 引入 GPS 导航 推出...Face Time 视频通话 首次加入 LED 闪光灯 iPhone 4S（2011） 引入 Siri 语音助手 使用 A5 芯片 改善天线设计 支持 1080P 视频录制 iPhone 5（2012...） 屏幕尺寸增加到 4 英寸 4G LTE 网络支持 采用新的 Lightning 接口 首次使用 Nano-SIM 卡 iPhone 5c 和 5s（2013） iPhone 5c 采用聚碳酸酯机身...，多种配色 iPhone 5s 首次使用 64 位 A7 芯片 首次引入 Touch ID 指纹识别 iPhone 6 和 6 Plus（2014） 屏幕尺寸分别为 4.7 英寸和 5.5 英寸 采用全新的金属设计...网络技术 新增学院色彩编码系统（ACES） 总结 从上面整理出来的信息可以看出，每一代 iPhone 都引入了新的硬件技术，如更快的处理器、更高分辨率的屏幕、更先进的相机、更大的电池容量等。
大家好，又见面了，我是你们的朋友全栈君。 iPhone手机屏幕尺寸一般指：物理像素，ps像素。 iPhone的app现在一般适配2倍图和3倍图。...但是现在iphone 4/iphone 4s都是按照2倍图处理的，并且他们的屏幕截图也是640*960，说明它是2倍图。.../3）的线是显示出来的，说明iphone 4/iphone 4s物理分辨率是1像素。...下面是开发中用到的iphone,ipod,ipad对应的实际像素点和图片倍率： iphont4,iphone4s实际像素点： 3.5英寸屏（320/480） iphone5,iphone 5s,iphone...下面是iphone的ps像素（手机截图尺寸）： iphont4,iphone4s 像素尺寸： 3.5英寸屏（640/960） iphone5,iphone 5s,iphone 5se 像素尺寸：
app上传中会需要准备一些文件，如 icon图标，launch Image ，itunes Contect 中还需要上传不同尺寸的屏幕截图等，下面做一下小节。...， 也就是Retina HD 4.7 用于4寸屏（iPhone5/5s）的640x1136， 也就是Retina 4 用于3.5寸(iPhone4...iphone 中非retain 屏的像素是 320*480 也就是1x ,retain 屏的像素是非retain屏的2倍，所以我们用 @2x 来表示图片是在retain屏中来使用。...2.修改支持的设置和机器类型，针对不同的屏幕的给出不同的尺寸: ? 5.最后一步设置，需要在通用设置里面选中LaunchImage，同时将LaunchScreen设置为空: ?...640x960 Default-568h@2x.png 640 × 1136 Default-568h@3x.png 1242 × 2208 屏幕尺寸截图
最近，传闻苹果又将推出4寸屏幕的iPhone 7。消息一出，深沉的小编就陷入了思考。 其实苹果一直都是一家以创新为核心驱动力的公司。...当年的乔布斯本着移动的本质是便携的观念，对尺寸很敏感很固执，他认为3.5寸是最适合携带的，4寸就已是极限。...在这样的理念下苹果公司推出的iPhone 4以及iPhone 4s才能够重新定义智能手机，最终风靡全球。 在乔布斯巅峰之后的苹果在创新方面貌似开始走下坡路。...三星推出的Galaxy和Note系列凭借大屏二字无情抢夺苹果的市场，也开启了砖头式手机的时代。创新不足的苹果公司只能在焦虑中向市场妥协。在这种情况下，4英寸的iPhone 5横空出世。...其实悲催的iPhone 5算是苹果公司打入大屏市场的试水产品，谨慎的苹果只是将尺寸拉长，因此在视觉上4英寸和3.5英寸差别并不明显。这算是苹果的第一次妥协。
废话不多说，本文主要介绍以下三块内容：移动设备尺寸；前端适配方案；设计师与前端如何对接。 移动设备尺寸 网上专门讲解移动设备尺寸的文章很多，事实上，移动设备种类之多简直是噩梦一般。...而开发时，由于 iPhone 以及许多 Android 机都具有高分辨率屏幕，比如 iPhone4S 的 Retina 屏幕实际像素点是物理像素的 两倍。...效果：按设计稿尺寸除以2，元素宽度使用百分比实现 场景：平台型页面，页面布局不是很复杂 优点：可以适应几乎所有设备 缺点：横向拉宽会使布局比例失调，且复杂结构百分比实现有难度 3，基于媒体查询的响应式方案...如果按照 640 宽度进行设计，实际上我们潜在约定了这是个类似 iPhone4/4S 的 2 倍像素比的设计稿。那么，无论采用何种适配方案，我们输出的 icon 等都是 相当于两倍尺寸的。...而如果是百分比方案等，则在样式中设置设计稿 1/2 的尺寸（对应设备的物理像素），但 icon 图片本身还是设计稿的尺寸，只是在 Retina 屏幕上需要更多的像素，所以用代码将其展示时在设备上的物理尺寸压缩到了
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
