5.8寸显示屏对应像素 ios_ios5.8寸屏截图尺寸 - CSDN
  • iOS常用控件尺寸

    2019-09-05 11:34:27
    iOS 开发中用到的单位 pt 是独立像素的意思,它是绝对长度,不随屏幕像素密度变化而变化(和我们日常用到的毫米、厘米是一个意思,只是它要小得多),在非视网膜的 iPhone 上(iPhone 3G),苹果规定 1px=1pt,也...

    【常识介绍】

    px:像素
    pt:独立像素 / point / 点

    iOS 开发中用到的单位 pt 是独立像素的意思,它是绝对长度,不随屏幕像素密度变化而变化(和我们日常用到的毫米、厘米是一个意思,只是它要小得多),在非视网膜的 iPhone 上(iPhone 3G),苹果规定 1px=1pt,也就是说 pt 和像素点是一一对应的。但随着 iPhone 4 的到来,高分屏出现了(视网膜屏),这个时候 1pt 对应 2px。

    所以用固定长度 pt 作为开发单位的好处是:这样可以统一图形在同一种类不同型号设备上图形的大小。而如果用像素作为单位的话,就乱了套了,因为在不同像素密度的屏幕里面,像素本身大小是不一样的。

     

    APP设计尺寸单位各自的定义:

    px:pixel———————————— 【 像素】 电子屏幕上组成一幅图画或照片的最基本单元

    pt: point—————————————【 点】印刷行业常用单位,等于1/72英寸

    ppi: pixel per inch————————【每英寸像素数】 该值越高,则屏幕越细腻

    dpi: dot per inch—————————【每英寸多少点】,该值越高,则图片越细腻

    dp: dip,Density-independent pixel, 【安卓开发用的长度单位】

     

     

     

    如果是用PS做设计稿就用750*1334

    如果是用SKetch或者XD来设计,常见是用1倍尺寸来说,也就是375*667或者375*812(iPhone X)。

     

    分辨率和显示规格

    设备名称 屏幕尺寸 PPI Asset 竖屏点(point) 竖屏分辨率(px)
    iPhone XS MAX 6.5 in 458 @3x 414 x 896 1242 x 2688
    iPhone XS 5.8 in 458 @3x 375 x 812 1125 x 2436
    iPhone XR 6.1 in 326 @2x 414 x 896 828 x 1792
    iPhone X 5.8 in 458 @3x 375 x 812 1125 x 2436
    iPhone 8+ , 7+ , 6s+ , 6+ 5.5 in 401 @3x 414 x 736 1242 x 2208
    iPhone 8, 7, 6s, 6 4.7 in 326 @2x 375 x 667 750 x 1334
    iPhone SE, 5, 5S, 5C 4.0 in 326 @2x 320 x 568 640 x 1136
    iPhone 4, 4S 3.5 in 326 @2x 320 x 480 640 x 960
    iPhone 1, 3G, 3GS 3.5 in 163 @1x 320 x 480 320 x 480
    iPad Pro 12.9 12.9 in 264 @2x 1024 x 1366 2048 x 2732
    iPad Pro 10.5 10.5 in 264 @2x 834 x 1112 1668 x 2224
    iPad Pro, iPad Air 2, Retina iPad 9.7 in 264 @2x 768 x 1024 1536 x 2048
    iPad Mini 4, iPad Mini 2 7.9 in 326 @2x 768 x 1024 1536 x 2048
    iPad 1, 2 9.7 in 132 @1x 768 x 1024 768 x 1024

     

    ultimate-guide-to-iphone-resolutions

     

    下面4张图片摘自:超全面的UI设计规范整理汇总(包含iPhone X适配)

    iPhone-X-Screen-Demystified

     

    iPhoneX-Portrait

     

    下面2张图片摘自淘宝团队出的一个规范文档。

    chicun

    2-(1)

     

    字体:

    zitibao

    app所用的字体大礼包下载(虎哥整理的)

    中文字体:PingFang SC

    英文字体:SF UI Text 、SF UI Display

    其中SF UI Text适用与小于19pt的文字,SF UI Display适用于大于20pt的文字

    注意:下面字号pt单位是按照1倍说明的,如果你是按照750*1334设计的话,需要自己乘2得到PX像素值。

     

    常见的字体大小:

    24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。

    元素 字重 字号(pt) 行距 字间距
    Title 1 Light 28pt 34pt 13pt
    Title 2 Regular 22pt 28pt 16pt
    Title 3 Regular 20pt 24pt 19pt
    Headline Semi-Bold 17pt 22pt -24pt
    Body Regular 17pt 22pt -24pt
    Callout Regular 16pt 21pt -20pt
    Subhead Regular 15pt 20pt -16pt
    Footnote Regular 13pt 18pt -6pt
    Caption 1 Regular 12pt 16pt 0pt
    Caption 2 Regular 11pt 13pt 6pt
    元素 字号(pt) 字重 字距(pt) 类型
    Nav Bar Title 17 Medium 0.5 Display
    Nav Bar Button 17 Regular 0.5 Display
    Search Bar 13.5 Regular 0 Text
    Tab Bar Button 10 Regular 0.1 Text
    Table Header 12.5 Regular 0.25 Text
    Table Row 16.5 Regular 0 Text
    Table Row Subline 12 Regular 0 Text
    Table Footer 12.5 Regular 0.2 Text
    Action Sheets 20 Regular / Medium 0.5 Display

     

    图标 Icon

    从iOS 7开始,app图标一直使用超椭圆的形状,原来旧的简单圆角半径值没有了。所以在为iOS设计应用程序图标时,我建议使用Apple提供的官方应用程序图标模板。

    圆角的图形不应该包含在最终的输出成品中,但如果你想要添加和应用程序icon拐角对齐的描边和阴影效果,那你可能还会用到圆角图形。

    提醒:如果你要使用超椭圆形状对icon进行蒙板(遮罩),又希望将应用效果和icon拐角对齐,那你要确保在遮罩外的区域不能使用任何透明的图形。应用程序icon不支持透明度,相反作为纯黑色进行渲染。如果你的遮罩不是百分百精确,那用户将会在圆角边缘看 到黑色的锯齿。推荐将canvas的背景设置成和app icon一样的背景。

    设备名称 应用图标 App Store图标 Spotlight图标 设置图标
    iPhone X, 8 , 7 , 6s , 6s 180 x 180 px 1024 x 1024 px 120 x 120 px 87 x 87 px
    iPhone X, 8, 7, 6s, 6, SE,5s, 5c, 5,
    4s, 4
    120 x 120 px 1024 x 1024 px 80 x 80 px 58 x 58 px
    iPhone 1, 3G, 3GS 57 x 57 px 1024 x 1024 px 29 x 29 px 29 x 29 px
    iPad Pro 12.9, 10.5 167 x 167 px 1024 x 1024 px 80 x 80 px 58 x 58 px
    iPad Air 1 & 2, Mini 2 & 4,
    3 & 4
    152 x 152 px 1024 x 1024 px 80 x 80 px 58 x 58 px
    iPad 1, 2, Mini 1 76 x 76 px px 1024 x 1024 px 40 x 40 px 29 x 29 px

    我们一般做1024×1024尺寸,一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

    注意:我打开了裁切圆角的开关,所以自动生存的都是圆角的,主要是为了过稿子给大家看着方便。

    给程序小哥的素材资源不用打开这个开关,那么自动切出就是方角的,直接一包图标素材丢给程序小哥就行了。

     

    Design-IconGrid

    记住画图标的时候图形尽量在下图所示的圆形内。

     

     

    自定义图标 Custom Icons

    设备名称 导航栏和工具栏图标尺寸 标签栏图标尺寸
    iPhone 8 , 7 , 6 , 6s 66 x 66 px 75 x 75 px  最大144 x 96 px
    iPhone 8, 7, 6s, 6, SE 44 x 44 px 50 x 50 px  最大96 x 64 px
    iPad Pro, iPad, iPad mini 44 x 44 px 50 x 50 px  最大96 x 64 px

     

    界面的图标切图:

    1. 蓝湖切图教程
    2. Cutterman选中@2x @3x导出。

    sample1

     

    界面主流标注工具:

    ios开发里单位是pt

    750×1334尺寸的换算关系 1pt=2px,也就是说程序员拿到我们的px单位的标注稿,自己除以2就是pt了。

     

    1. PS蓝湖插件下载>> 
    2. SKetch插件下载>>
    3. 蓝湖手机预览APP下载>>
    4. 蓝湖自动同步网盘团队协作>>
    5. 蓝湖详细使用教程
    6. 一键标注神器-zeplin

     

    其他标注工具:

    1. 马克鳗
    2. PxCook 像素大厨
    3. Parker标

    交接给程序:

    最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

     

    引导页:

    值得注意的是引导页切图需要单独设计多套(640×1136、750×1334、1125×2436、1242×2208)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。

     

    适配方法3个原则:(不清楚的在网站搜索适配2字)

    1. 文字流式
    2. 控件弹性
    3. 图片等比缩放

     

    配色

    Design-Colors

     

    注意:下面pt单位是按照1倍说明的,如果你是按照750*1334设计的话,需要自己乘2得到PX像素值。

    导航栏(Navigation Bar)

    导航栏包含了可以导航整个应用、管理当前界面内容的控件。它一般都存在于屏幕的顶部,状态栏的下方。 在默认情况下,导航栏是半透明的,并且会把被导航栏遮住的页面内容进行模糊处理。当然,导航栏也可以 被设置为不透明的纯色背景、渐变色背景甚至是一个自定义的位图。

    随着IOS 11的发布,苹果介绍了一种新的导航栏样式:当应用的滚动位置处于0时(即在顶部),标题会移 动到导航栏的下方单独成一行,并且被大幅放大(就是上图第三种状态)。当用户开始将界面往下滚动时, 这个大标题就会淡出屏幕,并以它原本的大小回归到导航栏的中间位置(上图第一、二种状态)。

    横屏模式下iPhone的导航栏状态。除了iPad设备,其他设备的状态栏的高度都会被缩减12pt。当然在横屏模式下隐藏掉导航栏也是 一种很常见的做法。

     

    导航栏中的元素必须遵守如下几个对齐原则:

    • 返回按钮必须在左边对齐。
    • 当前界面的标题必须在导航栏正中。
    • 其他控制按钮必须在右边对齐。如果可以的话,尽量留存一个主要的控制按钮来保持界面的简洁和避免 按钮的点按失败。

     

    工具栏(Tool Bar)

    工具栏包含了一组可以管理或操作当前页面内容的动作。在iPhone上,它一直显示在屏幕的底部。不过在iPad 上,它也可以显示在屏幕的顶部。

    和导航栏类似,工具栏的背景是可以被设置的,如果是在默认模式,它就会变成半透明,并对下面被遮住的 页面内容做模糊处理。

    当一个页面需要超过三个主要的操作按钮时,就可以把这些按钮放到工具栏里了,因为这些按钮很难被放入 导航栏中,即便放进去了也有可能会让界面看起来很凌乱。

     

    搜索栏(Search Bar)

    在默认模式下,搜索栏有两种风格:突出显示的(搜索栏很醒目,为亮色)和不突出显示的(搜索栏和周围 环境对比度不高,为暗色)。两种版本都拥有同样的功能。

    • 只要用户还没有输入内容,搜索栏内就会显示占位符,同时根据当时情况,应该有一个书签图标可以让 用户访问最近搜索的内容或用户自己保存的搜索词条。
    • 一旦用户输入了内容,占位符就会消失,同时清除按钮就会出现在右侧边缘,用来清除用户输入的内容。

    搜索栏可以使用一个简短的句子来做为搜索提示,介绍一下可以搜索出内容的搜索词条,比如“输入城市名、 邮政编码或者机场名”。

    突出显示的搜索栏风格(亮色),上图是搜索栏分别在没有提示语句和包含提示语句情况下的样式。

     

    不突出显示的搜索栏风格(暗色)。

    为了加强对搜索结果查询的控制,我们可以为搜索栏绑定一个范围选择栏(Scope Bar)。范围选择栏和搜 索栏的风格一致,而且在我们已经明确知道搜索结果种类的情况下会很有用。比如,在一个音乐应用里,搜 索结果就可以通过表演家、专辑名和歌曲名这几个分类进行再过滤。

     

    标签栏(Tab Bar)

    标签栏可以让用户快速地在一个应用的几个页面之间来回切换,并且也只有存在这个需求的时候我们才会用 到标签栏。它通常出现在屏幕的底部边缘,在默认情况下,它也是半透明风格并像导航栏一样将被遮住的页 面做模糊处理。

    标签栏所能装下的标签个数是有限的,如果超过了最大值,那么最后一个标签就会被替换成“更多”选项,该 选项会引出一个列表,里面全是被隐藏掉的标签以及一个可以将所有标签进行重新排序的选项。

     

    iPhone设备上最多允许展示5个标签,不过在iPad上最多可以展示7个(不包括更多选项)。

     

    为了通知用户来自某个界面的新消息,在对应标签按钮上标记出消息条数就显的很有意义。另外,如果某个 界面是暂时不可用的,那么它对应的标签按钮也不应该完全隐藏,而是应该整体变淡呈现出一种视觉上的不 可点击状态。

     

    列表菜单(Table View)

    列表菜单是用来展示单列或多列的包含大大小小的列表样式的信息,它既支持将多行信息划分成为一个单独 的部分,也支持将信息划分为多个部分,进行分组。

    根据你需要展示的数据类型,有两种基本的列表菜单形式可供你选择。

     

    平铺

    一个平铺的列表菜单通常包含很多行数据,顶部可以有一个标题,底部可以有一个页脚。这种列表形式可以 用来作为一个垂直的导航出现在屏幕的右侧边缘,这样一来,当你要呈现的数据非常多并且可以按照某种规 律来排序时(比如按字母的降序排列),用上这种垂直导航就会很方便了。

     

    分组

    一个分组式的列表菜单可以允许你对列表行进行分组,每一组可以有一个标题(描述这一组数据的内容)和 一个页脚(帮助信息)。一个分组式的列表菜单需要包含至少一组的信息并且每一组至少包含一行数据。

     

    两种列表类型都支持多种风格用来展示你的数据信息,以便让用户可以轻松的浏览、阅读和修改。

     

    默认

    默认风格的列表行会在左侧显示选项图标和选项标题。

     

    分段控件(Segment Controls)

    分段控件包含了一组(至少两个)分段,它可以用来过滤内容或者为那些有清晰的分类类型的信息创建标签。

     

    每一个分段都包含一个文本标签或者一个位图(图标),但绝不是同时包含。另外,在一个分段里使用混合 数据类型(文本和图像)也是极其不推荐的。每个分段的宽度按照分段的数量进行自适应适配(2个分段时: 每个分段宽度占50%,5个分段时:每个分段宽度占20%)。

     

    滑块(Sliders)

    滑块控件允许用户在固定范围内选择一个数值。使用滑块会让整个选择过程很顺利并且没有多余的步骤,所 以用来选择不精确的模糊值最适合不过了。比方说,在调节音量时,使用滑块控件就非常合适,因为用户可 以通过倾听来辨别音量是大,还是过大,但是如果是通过设置一个精确的分贝值来设置音量,就会显得很不 合实际。

     

     

    滑块控件是可以为最小值和最大值设置图标的,将它们分别放在滑块控件的头部和尾部,这样一来你就可以 更加直观的感受到这个滑块的目的。

     

    步进器(Stepper)

    当用户需要在一组固定值范围内选择输入一个精确的值时(比如1-10),就可以使用步进器。步进器包含两 个按钮,一个用来减少当前值,另一个用来增加当前值。

     

     

    视觉上来说,步进器是可以被高度自定义化的:

    你可以为步进器的按钮设置自己的图标。

    当你想要保持IOS风格的外观时,你可以用一个浅浅的颜色来自定义边框、背景和图标,这样这些元素 就会被自动设置成你选择的颜色。

    如果你还想更进一步,你可以为步进器按钮和分隔符设置完全自定义化的背景图片。

     

    开关(Switch)

     

    开关允许用户快速的在开和关两种状态之间切换。它是IOS应用的复选框。它的开与关状态的颜色可以被自 定义化,但是它的外观和大小就不能被改变了。

     

    展开全文
  • iOS App预览和屏幕快照

    2019-07-22 09:46:08
    我们在提交审核时大多都只上传5.5英寸显示屏对应的屏幕快照(模拟器直接Command+S截图)且很少用到App预览,这是建立在前者可以兼容3.5英寸和4.0等显示屏的基础之上,实际上苹果提供了很多尺寸供我们选择,包括iPad ...

    转载:https://www.jianshu.com/p/d9cc67bba211

    我们在提交审核时大多都只上传5.5英寸显示屏对应的屏幕快照(模拟器直接Command+S截图)且很少用到App预览,这是建立在前者可以兼容3.5英寸和4.0等显示屏的基础之上,实际上苹果提供了很多尺寸供我们选择,包括iPad Pro和iPhone X也不例外。
    而对于数量限制,官方是这样描述的:对于iOS、tvOS和watchOS,可以上传最多3个App预览和最多10张屏幕快照。

    App预览

    App预览.png

    创建并上传App预览的要求:

    • 一台运行 macOS 10.10 或更高版本的 Mac,配备 Safari 浏览器 8 或更高版本
    • 一个视频编辑器,如 iMovie 剪辑或 Final Cut Pro X
    • 一台运行 iOS 8 或更高版本的设备(针对 iPhone 为 5.5 英寸显示屏;针对 iPad 为 12.9 英寸显示屏)的设备,或一台 Apple TV

    另外对上传的文件有如下限制:

    1. 预览视频最小时长15s,最大时长30s
    2. 文件最大不得超过500MB
    3. 方向:纵向或横向
    4. 需要在iOS 8或更高版本进行视频捕捉和播放

    官方文档说明:

    • 可以上传tH.264和ProRes 422(仅限HQ)格式的App预览,支持的扩展名有:.mov、.m4v、.mp4
    • 在iPhone、iPad和Apple TV上,App预览均显示与屏幕快照之前(优先显示App预览)
    • 需要设置App预览海报帧,默认为5秒
    • 上传完成后,最多需要24小时时间进行处理
    • 可以随时移除App预览,但仅在状态为可编辑时
    • 针对iOS App,可以上传纵向或横向App预览,但App Store产品页面总以纵向展示,只有当顾客播放该预览视频时App预览才会旋转到原始方向。针对tvOS App,仅可以上传横向的App预览

    屏幕快照规范

    屏幕快照.png

    官方文档是这样解释的:

    1. 针对 iPhone,需要上传:屏幕快照(必须的,最多10张)和 App 预览(可选的,至多 3 个),对于机型必须上传6.5英寸(像素:1242 × 2688,对应机型:iPhone Xs Max)和5.5英寸(像素:1242 × 2208,对应机型:iPhone 8 plus),水果的新规则也要求开发者必须适配iPhone X/iPhone Xs这类刘海屏机型才允许上架(Update at 2019年5月20日);
    2. 针对 iPad,您需要一组用于 12.9 英寸(iPad Pro 第二代)显示屏的屏幕快照。此组屏幕快照在各个地区的 App Store 上被查看时,会针对其他设备尺寸适当缩放;
    3. 针对5.8英寸、6.5英寸的显示屏素材是独立的、可选的(现在必须上传6.5英寸的素材),它不会缩放至其他设备尺寸,也就是说如果单独上传了素材则只有在对应尺寸的iPhone X、iPhone XS Max机型上才会展示。

    参考苹果文档:App 预览规范(https://help.apple.com/app-store-connect/#/dev4e413fcb8)

    如果本文对你有所帮助记得点个赞哈



    作者:Geniune
    链接:https://www.jianshu.com/p/d9cc67bba211
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • flutter 的像素尺寸

    2020-04-22 13:31:43
    一般我们在android,ios中都有自己的尺寸,如:dp,pt 但是在flutter中写尺寸是没有单位的。如: SizedBox(height: 736,width: 375,child: Container(color: Colors.lightBlueAccent) ) 实际上它的尺寸当然是有的...

    一般我们在android,ios中都有自己的尺寸,如:dp,pt

    但是在flutter中写尺寸是没有单位的。如:

    SizedBox(height: 736,width: 375,child: Container(color: Colors.lightBlueAccent) )

    实际上它的尺寸当然是有的。 在不同设备中它与 devicePixelRatio 属性有关,通过此属性得到一个逻辑像素占用多少个实际像素,根据文档(https://api.flutter.dev/flutter/dart-ui/Window/devicePixelRatio.html)有几点需要注意:

      1. 很少需要修改这个值

      2. 这个值来自设备,可能会不准确

     

    我用模拟器(下面列表中全部都是)来做测试,信息如下:

    屏幕英寸 分辨率 实测宽度 ppi devicePixelRatio
    android  5寸 1080*1920 412 420 2.625
    iPhone8+ 5.5寸 1080*1920 414 401 3
    iPhoneXr 6.1寸 828 * 1792 414 326 2
    iPhone8 4.7寸 750 * 1334 375 326 2
    iPhone7+ 5.5寸 1080 * 1920 414 401 3
    iPhoneX 5.8 2436×1125 375 458 3
    iPhone 11 1792 x 828 像素分辨率 414 326 ppi 2

     

    实测宽度:在Flutter中,一个SizedBox的宽度刚好撑满屏幕宽度的数值

    结论:

      除了 iPhone8+,iPhone7+ 之外,其它的 : 分辨率宽度 =  devicePixelRatio * 实测宽度

      怀疑 iPhone8+,7+ 的模拟器应该是Flutter存在BUG. 它的分辨率不是上面表格中的 1080 * 1920

            内部的数据:window.physicalSize.width = 1242 , MediaQuery.of(context).size.width = 414  

     

    其它朋友写的文章 ,比较有帮助

    https://www.cnblogs.com/ckAng/p/10077832.html

     

    展开全文
  • 简述 为了避免 Android 设备的适配大坑,苹果提供一套适配自家产品不同尺寸的方案,让我们来探究一下...但是 iPhone 4之后就发生了改变,iPhone 4 采用Retina显示屏。即当前物理尺寸不变,但像素成倍增加,变成了...

    简述

    为了避免 Android 设备的适配大坑,苹果提供一套适配自家产品不同尺寸的方案,让我们来探究一下像素与点的关系吧。

     

    探究

    从初代iPhone 到 iPhone 3GS,iPhone系列坚守 320 x 480 像素。开发人员采用绝对定位及像素模式进行处理。但是 iPhone 4之后就发生了改变,iPhone 4 采用Retina显示屏。即当前物理尺寸不变,但像素成倍增加,变成了640x960像素。

     

    为了避免同行出现的大坑(屏幕适配难),苹果对开发人员提出了point (点) 的概念。(以一维方式进行探究)

    1 在iPhone 3GS中, 1 个点 等于 1 个像素 

    2 在以后的设备中(非iPhone 6+/6s+/7+/8+/X) ,1个点等于2个像素 

    3 iPhone 6+/6s+/7+/8+/X 中 ,1个点等于3个像素

    这样用户在使用iPhone 4 的时候,会感觉比iPhone 3GS 更加细腻。

     

    由此,我们需要对市面上的一些单位及术语进行相关的总结:

    1 英寸: 作为手机屏幕对角线的物理长度的单位。如 iPhone 8 Plus 为5.5英寸。

    2 像素: 可以想象成屏幕上真正用来显示颜色的发光小点。如 iPhone 8 Plus 为 1080x1920 像素。

    3 点:    针对开发人员,开发App时候用的单位,是一个虚拟的单位,用于屏蔽各个设备屏幕像素的不同,兼容以前的程序。

    4 ppi(pixel per inch): 每英寸有多少个像素。 iPhone 4 的屏幕是  640x960像素,3.5英寸。那么根据勾股定理,对角线应该有 1154个像素,转换一下也就是 1154/3.5 = 330pi, 官方给出的数字是 326 ppi。

    5 Retina屏: Retina翻译过来是视网膜。当像素太密超过 300ppi的时候,人眼就不能够区分出每个像素,因此 iPhone 4以后的屏幕都是Retina屏。

    6 文字、颜色等矢量数据 放大是不会失真的。但是图片并非矢量数据,直接使用会产生问题。因此苹果对它采用不同的处理方式。

     

    假设example.png 为 30x40 像素 (这里的单位为像素,数字图片的单位基本都为像素)。当example.png在 iPhone 3GS和 iPhone 4中使用的时候,都占据屏幕30x40个点。而iPhone 4中 1 个点等于 2 个像素,也就是30x40像素的图片,占据了60x80 像素的屏幕,因此这图片在iPhone 4中看起来会模糊。

     

    为了对图片进行适配,需要准备三张内容相同的图片,放在同一目录下。

    example.png             // 30x40 像素

    example@2x.png      // 60x80 像素

    example@3x.png      // 90x120 像素 

    当程序中使用图片时,会根据屏幕模式自动选择对应的图片。 屏幕1x模式,就会选择example.png。 2x就会优先选择example@2x.png,假如example@2x.png不存在时,就会降级选择example.png。屏幕3x模式同理屏幕2x模式的降级选择。

     

    附表 (至2017-11-06以来,iPhone 系列设备参数表)

    机型

    屏幕宽高(点)

    屏幕宽高(渲染像素)

    设备分辨率

    屏幕模式

    屏幕精度(ppi)

    屏幕对角线长度

    iPhone 3GS

    320 x 480

    320 x 480

    320 x 480

    @1x

    162

    3.5 英寸

    iPhone 4

    320 x 480

    640 x 960

    640 x 960

    @2x

    326

    3.5 英寸

    iPhone 4s

    320 x 480

    640 x 960

    640 x 960

    @2x

    326

    3.5 英寸

    iPhone 5

    320 x 568

    640 x 1136

    640 x 1136

    @2x

    326

    4.0 英寸

    iPhone 5s

    320 x 568

    640 x 1136

    640 x 1136

    @2x

    326

    4.0 英寸

    iPhone 5c

    320 x 568

    640 x 1136

    640 x 1136

    @2x

    326

    4.0 英寸

    iPhone 6

    375 x 667

    750 x 1334

    750 x 1334

    @2x

    326

    4.7 英寸

    iPhone 6 Plus

    414 x 736

    1242 × 2208

    1080 x 1920

    @3x

    401

    5.5 英寸

    iPhone 6s

    375 x 667

    750 x 1334

    750 x 1334

    @2x

    326

    4.7 英寸

    iPhone 6s Plus

    414 x 736

    1242 × 2208

    1080 x 1920

    @3x

    401

    5.5 英寸

    iPhone 7

    375 x 667

    750 x 1334

    750 x 1334

    @2x

    326

    4.7 英寸

    iPhone 7 Plus

    414 x 736

    1242 × 2208

    1080 x 1920

    @3x

    401

    5.5 英寸

    iPhone 8

    375 x 667

    750 x 1334

    750 x 1334

    @2x

    326

    4.7 英寸

    iPhone 8 Plus

    414 x 736

    1242 × 2208

    1080 x 1920

    @3x

    401

    5.5 英寸

    iPhone X

    375 x 812

    1125 x 2436

    1125 x 2436

    @3x

    458

    5.8 英寸

    iPhone Xs

    375 x 812

    1125 x 2436

    1125 x 2436

    @3x

    458

    5.8 英寸

    iPhone Xs Max

    414 x 896

    1242 x 2688

    1242 x 2688

    @3x

    458

    6.5 英寸

    iPhone XR

    414 x 896

    828 x 1792

    828 x 1792

    @2x

    326

    6.1 英寸

    (注: iPhone 6+/6s+/7+/8+ 渲染像素与设备分辨率不一致,iPhone 3GS/6+/6s+/7+/8+/X除外,其他所有iPhone的ppi是一致的,都是326,用@2x的素材。

    但是6+/6s+/7+/8+的实际ppi是401,理论上苹果应该用401/326 * @2x=@2.46x的素材。但是这个奇葩的比例对UI美工而言很难切图。所以苹果为方便开发者用的是@3x的素材,然后再缩放到@2.46x上,实际上是缩放到2.46/3=83%。实际上苹果选取了一个接近比例的87%。

    这样算下来,物理分辨率和虚拟分比率的比例是87%,也就是1920/0.87=2208,1080/0.87=1242 。

    好处就是开发者更方便,比如准备素材时,字号可以直接调成3x的。)

     

    参考资料

    1  http://www.zhihu.com/question/25421514

    2  http://www.jianshu.com/p/ea0c362ed4b6

    3  https://www.apple.com/cn/iphone/compare/

    4  http://bbs.feng.com/read-htm-tid-8740473.html

    展开全文
  • VGA:Video Graphics Array,即:显示绘图矩阵,相当于640×480 像素;  HVGA:Half-size VGA;即:VGA的一半,分辨率为480×320;  QVGA:Quarter VGA;即:VGA的四分之一,分辨率为320×240;  WVGA:Wide ...
    一.屏幕分辩率
    
    VGA:Video Graphics Array,即:显示绘图矩阵,相当于640×480 像素; 
    HVGA:Half-size VGA;即:VGA的一半,分辨率为480×320; 
    QVGA:Quarter VGA;即:VGA的四分之一,分辨率为320×240; 
    WVGA:Wide Video Graphics Array;即:扩大的VGA,分辨率为800×480像素; 
    WQVGA:Wide Quarter VGA;即:扩大的QVGA,分辨率比QVGA高,比VGA低,一般是:400×240,480×272; 
    二.drawable-(hdpi,mdpi,ldpi)的区别
    dpi是“dot per inch”的缩写,每英寸像素数。
    四种密度分类: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)
    一般情况下的普通屏幕:ldpi是120,mdpi是160,hdpi是240,xhdpi是320。
    三.drawable-(hdpi,mdpi,ldpi)和WVGA,HVGA,QVGA的联系
    hdpi里面主要放高分辨率的图片,如WVGA (480×800),FWVGA (480×854)
    mdpi里面主要放中等分辨率的图片,如HVGA (320×480)
    ldpi里面主要放低分辨率的图片,如QVGA (240×320)
    系统会根据机器的分辨率来分别到这几个文件夹里面去找对应的图片
    四.度量单位含义
    dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个,不依赖像素。 
    dp: dip是一样的
    px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素。
    pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;
    sp: scaled pixels(放大像素). 主要用于字体显示best for textsize。
    in(英寸):长度单位。 
    mm(毫米):长度单位。
    度量单位的换算公式
    在android源码包TypedValue.java中,我们看如下函数:
    public static float applyDimension(int unit, float value,

                            DisplayMetrics metrics)

       {

            switch (unit) {

            case COMPLEX_UNIT_PX:

                return value;

            case COMPLEX_UNIT_DIP:

                return value * metrics.density;

            case COMPLEX_UNIT_SP:

                return value * metrics.scaledDensity;

            case COMPLEX_UNIT_PT:

                return value * metrics.xdpi * (1.0f/72);

            case COMPLEX_UNIT_IN:

                return value * metrics.xdpi;

            case COMPLEX_UNIT_MM:

                return value * metrics.xdpi * (1.0f/25.4f);

            }

            return 0;

        }

    该函数功能:是把各单位换算为像素。

    metrics.density:默认值为DENSITY_DEVICE / (float) DENSITY_DEFAULT;

    metrics.scaledDensity:默认值为DENSITY_DEVICE / (float) DENSITY_DEFAULT;

    metrics.xdpi:默认值为DENSITY_DEVICE;

    DENSITY_DEVICE:为屏幕密度

    DENSITY_DEFAULT:默认值为160

     

    五.屏幕密度:

    表示每英寸有多少个显示点,与分辨率是两个不同的概念。

           Android主要有以下几种屏:如下表                                   

    屏幕

    Tyep

    宽度

    Pixels

    高度

    Pixels

    尺寸

    Range(inches)

    屏幕密度

    QVGA

    240

    320

    2.6-3.0

    low

    WQVGA

    240

    400

    3.2-3.5

    low

    FWQVGA 

    240

    432

    3.5-3.8

    low

    HVGA 

    320

    480

    3.0-3.5

    Medium

    WVGA 

    480

    800

    3.3-4.0

    High

    FWVGA

    480

    854

    3.5-4.0

    High

    WVGA

    480

    800

    4.8-5.5

    Medium

    FWVGA 

    480

    854

    5.0-5.8

    Medium

    备注

    目前android默认的low=120 ;Medium =160; High = 240

     

    综上所述    

      据px = dip * density / 160,则当屏幕密度为160时,px = dip
      根据 google 的建议,TextView 的字号最好使用 sp 做单位,而且查看TextView的源码可知Android默认使用sp作为字号单位。将dip作为其他元素的单位。


    iPhone:

    iPhone 1G 320x480

    iPhone 3G 320x480

    iPhone 3GS 320x480

    iPhone 4 640x960

    iPhone 4S 640x960

    iPhone 5 640x1136

    iPhone 5S 640x1136

    iPhone 5C 640x1136

    iPhone 6 750x1334

    iPhone 6 Plus 1080x1920 (开发应按照1242x2208适配)

    iPod Touch:

    iPod Touch 1G 320x480

    iPod Touch 2G 320x480

    iPod Touch 3G 320x480

    iPod Touch 4G 640x960

    iPod Touch 5G 640x1136


    iPad:

    iPad 1 1024x768

    iPad 2 1024x768

    The New iPad 2048x1536

    iPad mini 1024x768

    iPad 4 2048x1536

    iPad Air 2048x1536

    iPad mini 2 2048x1536

    iPad Air 2 2048x1536

    iPad mini 3 2048x1536


    转载地址:
    http://blog.sina.com.cn/s/blog_957d483a01017ccj.html
    http://blog.csdn.net/cwf19860527/article/details/36667085
    展开全文
  • 机型发布时的系统屏幕英寸pt像素iPhone4 iOS43.5英寸320 * 480pt960x640iPhone4SiOS 53.5英寸320 * 480pt960x640iPhone5iOS 64英寸320 * 568pt1136x640​iPhone5C / 5SiOS 74英寸320 * 568pt1136x640​iPhone6iOS ...
  • IOS开发之尺寸

    2019-08-20 13:04:02
    在移动端或者前端开发中,UI图通常是带标注的,指定某个控件的长宽等...这其中的原因是因为标注一般都是按px格式给的,但是iOS底层绘制的时候是按照pt为单位进行绘制,这两个的区别在于: px就是表示pixel,像素...
  • 像素尺寸 倍图 4/4s 3.5 inch 326 ppi 320*480 pt 640*960 px @2x 5/5S/5c/SE 4.0 inch 326 ppi 320*568 pt 640*1136 px @2x 6/6S/7/8 4.7 inch 326 ppi 375*667 pt 75...
  • Android 屏幕适配

    2015-07-16 22:12:45
    众所周知,Android机型尺寸各种各样,于是屏幕适配就成了Android开发中很重要的一环。Android屏幕适配可能一些开发者都会遇到这样的问题,今天就来分享下屏幕适配,你会发现其实Android屏幕适配也可以很简单。...
  • IOS 屏幕适配(一)理论篇
  • 在实际页面的开发过程,往往显示屏幕的宽度换算为像素尺寸的1/2。 IOS: 6.5英寸 —— 1242 x 2688 px —— Xs Max 6.1英寸 —— 828 x 1792 px —— XR 5.8英寸 —— 1125 x 2436 px —— X/Xs 5.5英寸 —— ...
  • 移动端视口

    2020-05-11 17:39:56
    移动端系统分类2020/5/11 Android 4.x-10.x 我在实际当中遇到最低的是5.x(我服务公司内部,大概... IOS 3.5、4.0、4.7、5.5、5.8、6.1、6.5 屏幕分辨率:在说分辨率的时候我们常常会把大的值说在前面,所以在PC
  • 原文地址::https://blog.csdn.net/jia12216/article/details/82881672 相关文章 1、iphone关于单倍图和二倍图(导航 背景 变高)----... 2、ios切图(一倍图+二倍图+三倍图)----https://b...
  • 通过系统控件UIActivityViewController分享一个6000*4000尺寸的图片...因为现在是iphone x 5.8英寸 1242x2208,手机支持的最大分辨率不能太高,像6000*4000这样的超高分辨率的图片在app上使用很容易出问题...
  • iphone分辨率 480x320 3:2 960x640 3:2 1136x640 16:9 android主流分辨率 320x240 4:3 480x320 3:2 512x320 8:5 800x480 5:3 728x480 3:2 960x640 3:2
  • 这篇文章将总结和提炼《Real-Time Rendering 3rd》(实时渲染图形学第三版)的第五章“Visual Appearance(视觉外观)”的内容。当我们渲染三维模型的图像时,模型不仅要有适当的几何形状,还应该有所需的视觉外观。...
  • 所有内容均参考,来自网络 iOS 设备现有的分辨率如下: iPhone/iPod Touch 普通 320像素 x 480像素 iPhone 1、3G、3GS,iPod Touch 1、2、3 ...16:9 Retina 640像素 x 1136像素 iPhone 5,iPod
  • 在第四章“可视效果”中,我们研究了一些增强图层和它的内容显示效果的一些技术,在这一章中,我们将要研究可以用来对图层旋转,摆放或者扭曲的CGAffineTransform,以及可以将扁平物体转换成三维空间对象的...
  • 影响APP的大小的因素: 第一大因素:看你的APP页面采用的是storyboard,xib,代码那一种。你代码都是用storyboard实现的,那么的APP达到30M很正常,除非你的页面超少。若你的页面是都是用XIB实现的,你的APP达到20M...
  • IOS音视频(一)AVFoundation核心类
1 2 3 4 5 ... 7
收藏数 132
精华内容 52
关键字:

5.8寸显示屏对应像素 ios