iPhone手机尺寸指南

- UI设计须知


320 × 568 375 × 667 1125 × 2001 4.7″ 5.5″ 设备屏幕上显示的像素分辨率要低于渲染像素分辨率看到设备图像不是渲染像素 在设备显示图像之前必须要通过屏幕分辨率降低图像采样率显示渲染像素 物理像素px 开始时 所有图的坐标都是抽象单位pt. 他们只被用于iOS开发中使用坐标信息 坐标点pt 基于上面的pt点渲染成像素px这个过程叫做光栅格化 坐标点pt乘以渲染的倍数x得到渲染像素px坐标渲染倍数越大渲染显示越细腻 渲染像素px 最后物理像素px显示在设备屏幕上 用PPI单位告诉你屏幕上每1英寸匹配多少物理像素px让你亲眼看到屏幕上“大像素点” 屏幕物理尺寸 750 × 1334 iPhone 6 iPhone 6 Plus 4.7″ 5.5″ 单位为(pt) render at 3× render at 2× Display Zoom Display Zoom (device pixels) 414 × 736 1242 × 2208 1080 × 1920 5.5″ show at 401 PPI (pixels) (points) (device pixels) iPhone 6 Plus 5.5″ render at 3× 375 × 667 750 × 1334 4.7″ iPhone 6 render at 2× 1080 × 1920 (device pixels) 320 × 568 640×1136 iPhone 5, 5s render at 2× 4″ 4″ 320 × 480 640 × 960 3.5″ render at 2× (pixels) iPhone 4, 4s 3.5″ 320 × 480 3.5″ render at 1× (pixels) iPhone 2G, 3G, 3GS 3.5″ (points) (points) (points) (points) (points) (points) downsampling × 0.96 downsampling / 1.15 (pixels) (pixels) (pixels) 320 × 480 show at 401 PPI show at 326 PPI show at 326 PPI show at 326 PPI show at 326 PPI show at 163 PPI 4.7″ 640×1136 (pixels) upsampling × 1.171875

对iPhone手机尺寸的认识基础



a iPhone 6 Plus将被渲染的图片或字体缩小1.15倍来显示在屏幕上 物理像素px 用iOS开发中坐标点信息字体显示效果 坐标点显示效果 内容被渲染成像素px使用1x/2x/3x倍数放大后看到的效果叫栅格化效果 看看几个字母效果有何不同 渲染像素效果 重新绘制缩放后显示在屏幕设备上屏幕不同显示效果也不同 屏幕物理尺寸 render 2× downsampling / 1.15 show on device show on device show on device iPhone 4以前 iPhone 6 iPhone 6 Plus 3.5″ 4.7″ 5.5″ render 3× render 1× a a

通过不同的iPhone显示,我们总结以下几点:

iPhone 6p 缩放尺寸比为1920 / 2208 = 1080 / 1242 = 20 / 23。这意味着从原来的每23个渲染像素被分配到20个物理像素,换句话说,图像被缩小到约原始大小的87%。


23 pixels 20 pixels iPhone 4 以前 3.5″ iPhone 5 4″ iPhone 6 Plus 5.5″ 如果 显示格数倍为3x ???