Apple设备屏幕尺寸和方向

表格中包括了各种型号的iPad、iPhone、以及iPod touch等设备的详细信息,涵盖了从iPad Pro到各代iPhone和iPod touch的多个型号。

这些信息可用于开发应用程序时优化界面布局和图像显示,确保在不同设备上有良好的显示效果。

Device screen sizes and orientations

Device

Dimensions (portrait)

12.9” iPad Pro

1024x1366 pt (2048x2732 px @2x)

11” iPad Pro

834x1194 pt (1668x2388 px @2x)

10.5” iPad Pro

834x1194 pt (1668x2388 px @2x)

9.7” iPad Pro

768x1024 pt (1536x2048 px @2x)

8.3” iPad mini

744x1133 pt (1488x2266 px @2x)

7.9” iPad mini

768x1024 pt (1536x2048 px @2x)

10.9” iPad Air

820x1180 pt (1640x2360 px @2x)

10.5” iPad Air

834x1112 pt (1668x2224 px @2x)

9.7” iPad Air

768x1024 pt (1536x2048 px @2x)

10.2” iPad

810x1080 pt (1620x2160 px @2x)

9.7” iPad

768x1024 pt (1536x2048 px @2x)

iPhone 15 Pro Max

430x932 pt (1290x2796 px @3x)

iPhone 15 Pro

393x852 pt (1179x2556 px @3x)

iPhone 15 Plus

430x932 pt (1290x2796 px @3x)

iPhone 15

393x852 pt (1179x2556 px @3x)

iPhone 14 Pro Max

430x932 pt (1290x2796 px @3x)

iPhone 14 Pro

393x852 pt (1179x2556 px @3x)

iPhone 14 Plus

428x926 pt (1284x2778 px @3x)

iPhone 14

390x844 pt (1170x2532 px @3x)

iPhone 13 Pro Max

428x926 pt (1284x2778 px @3x)

iPhone 13 Pro

390x844 pt (1170x2532 px @3x)

iPhone 13

390x844 pt (1170x2532 px @3x)

iPhone 13 mini

375x812 pt (1125x2436 px @3x)

iPhone 12 Pro Max

428x926 pt (1284x2778 px @3x)

iPhone 12 Pro

390x844 pt (1170x2532 px @3x)

iPhone 12

390x844 pt (1170x2532 px @3x)

iPhone 12 mini

375x812 pt (1125x2436 px @3x)

iPhone 11 Pro Max

414x896 pt (1242x2688 px @3x)

iPhone 11 Pro

375x812 pt (1125x2436 px @3x)

iPhone 11

414x896 pt (828x1792 px @2x)

iPhone XS Max

414x896 pt (1242x2688 px @3x)

iPhone XS

375x812 pt (1125x2436 px @3x)

iPhone XR

414x896 pt (828x1792 px @2x)

iPhone X

375x812 pt (1125x2436 px @3x)

iPhone 8 Plus

414x736 pt (1080x1920 px @3x)

iPhone 8

375x667 pt (750x1334 px @2x)

iPhone 7 Plus

414x736 pt (1080x1920 px @3x)

iPhone 7

375x667 pt (750x1334 px @2x)

iPhone 6s Plus

414x736 pt (1080x1920 px @3x)

iPhone 6s

375x667 pt (750x1334 px @2x)

iPhone 6 Plus

414x736 pt (1080x1920 px @3x)

iPhone 6

375x667 pt (750x1334 px @2x)

4.7” iPhone SE

375x667 pt (750x1334 px @2x)

4” iPhone SE

320x568 pt (640x1136 px @2x)

iPod touch 5th generation and later

320x568 pt (640x1136 px @2x)

 

这个表格列出了不同设备的屏幕尺寸和方向(portrait and landscape,纵向/横向)以及它们在point(pt)和像素(px)之间的转换关系。

每个设备都有相应的纵向尺寸和横向尺寸,在纵向模式下,它们的屏幕分辨率是多少。

比如,以iPad Pro系列为例,12.9英寸的iPad Pro在纵向模式下的尺寸为1024x1366 pt,对应的像素为2048x2732 px @2x。这意味着在这种模式下,屏幕上有1024x1366个点,实际显示时为2048x2732个像素。

 

Device size classes

尺寸类别属性是系统提供给开发者的一种指导,用于描述设备屏幕的不同尺寸类别。它们可以帮助开发者更好地了解当前界面所在的设备环境,从而做出相应的布局和设计调整。

 

“常规宽度,常规高度”和“紧凑宽度,紧凑高度”是用来描述设备屏幕尺寸的不同类别。这些尺寸类别会影响应用程序的布局和显示效果,特别是在响应式设计方面。

  • 常规宽度,常规高度(Regular width, Regular height):这种尺寸类别适用于较大的屏幕,如iPad等大屏设备,以及iPhone在横向模式下。在这种情况下,应用程序通常有更多的空间来展示内容,因此可以考虑采用更复杂的布局和设计。

  • 紧凑宽度,紧凑高度(Compact width, Compact height):这种尺寸类别适用于较小的屏幕,如iPhone等小屏设备,以及iPad在竖向模式下。在这种情况下,屏幕空间有限,因此应用程序可能需要采取简化布局或调整元素大小以适应较小的屏幕空间。

对于开发者来说,理解不同尺寸类别的差异可以帮助他们更好地设计适配不同设备的界面布局。通过使用Auto Layout和Size Classes等技术,开发者可以针对不同尺寸类别创建灵活的界面,确保应用程序在各种设备上都能够呈现出最佳的用户体验。

An illustration of an iPad and an iPhone in both portrait and landscape orientations. Each device in each orientation includes a red screen and arrowed lines that indicate the full height and width of the screen.

Device

Portrait orientation

Landscape orientation

12.9” iPad Pro

Regular width, regular height

Regular width, regular height

11” iPad Pro

Regular width, regular height

Regular width, regular height

10.5” iPad Pro

Regular width, regular height

Regular width, regular height

9.7” iPad

Regular width, regular height

Regular width, regular height

7.9” iPad mini

Regular width, regular height

Regular width, regular height

iPhone 15 Pro Max

Compact width, regular height

Regular width, compact height

iPhone 15 Pro

Compact width, regular height

Compact width, compact height

iPhone 15 Plus

Compact width, regular height

Regular width, compact height

iPhone 15

Compact width, regular height

Compact width, compact height

iPhone 14 Pro Max

Compact width, regular height

Regular width, compact height

iPhone 14 Pro

Compact width, regular height

Compact width, compact height

iPhone 14 Plus

Compact width, regular height

Regular width, compact height

iPhone 14

Compact width, regular height

Compact width, compact height

iPhone 13 Pro Max

Compact width, regular height

Regular width, compact height

iPhone 13 Pro

Compact width, regular height

Compact width, compact height

iPhone 13

Compact width, regular height

Compact width, compact height

iPhone 13 mini

Compact width, regular height

Compact width, compact height

iPhone 12 Pro Max

Compact width, regular height

Regular width, compact height

iPhone 12 Pro

Compact width, regular height

Compact width, compact height

iPhone 12

Compact width, regular height

Compact width, compact height

iPhone 12 mini

Compact width, regular height

Compact width, compact height

iPhone 11 Pro Max

Compact width, regular height

Regular width, compact height

iPhone 11 Pro

Compact width, regular height

Compact width, compact height

iPhone 11

Compact width, regular height

Regular width, compact height

iPhone XS Max

Compact width, regular height

Regular width, compact height

iPhone XS

Compact width, regular height

Compact width, compact height

iPhone XR

Compact width, regular height

Regular width, compact height

iPhone X

Compact width, regular height

Compact width, compact height

iPhone 8 Plus

Compact width, regular height

Regular width, compact height

iPhone 8

Compact width, regular height

Compact width, compact height

iPhone 7 Plus

Compact width, regular height

Regular width, compact height

iPhone 7

Compact width, regular height

Compact width, compact height

iPhone 6s Plus

Compact width, regular height

Regular width, compact height

iPhone 6s

Compact width, regular height

Compact width, compact height

iPhone SE

Compact width, regular height

Compact width, compact height

iPod touch 5th generation and later

Compact width, regular height

Compact width, compact height

 

An illustration of iPad in landscape orientation with the left two-thirds of its screen shaded.2/3 split view

 

 

An illustration of iPad in landscape orientation with the left half of its screen shaded.1/2 split view

 

 

An illustration of iPad in landscape orientation with the left one-third of its screen shaded.1/3 split view

 

Device

Mode

Portrait orientation

Landscape orientation

12.9” iPad Pro

2/3 split view

Compact width, regular height

Regular width, regular height

 

1/2 split view

N/A

Regular width, regular height

 

1/3 split view

Compact width, regular height

Compact width, regular height

11” iPad Pro

2/3 split view

Compact width, regular height

Regular width, regular height

 

1/2 split view

N/A

Compact width, regular height

 

1/3 split view

Compact width, regular height

Compact width, regular height

10.5” iPad Pro

2/3 split view

Compact width, regular height

Regular width, regular height

 

1/2 split view

N/A

Compact width, regular height

 

1/3 split view

Compact width, regular height

Compact width, regular height

9.7” iPad

2/3 split view

Compact width, regular height

Regular width, regular height

 

1/2 split view

N/A

Compact width, regular height

 

1/3 split view

Compact width, regular height

Compact width, regular height

7.9” iPad mini 4

2/3 split view

Compact width, regular height

Regular width, regular height

 

1/2 split view

N/A

Compact width, regular height

 

1/3 split view

Compact width, regular height

Compact width, regular height

 

对于iPad设备,无论是哪个型号,在纵向和横向方向上尺寸类别都保持一致。尺寸类别均为“常规宽度,常规高度”。

对于iPhone设备,尺寸类别根据型号和方向而异。在纵向方向上,所有iPhone型号的宽度都是紧凑的,高度都是常规的。然而,在横向方向上,尺寸类别有所不同。一些iPhone型号在横向方向上具有紧凑的宽度和紧凑的高度,而其他一些具有常规宽度和紧凑高度。

针对紧凑高度的设备尺寸类别,您可以考虑以下一些特殊处理来优化您的应用程序:

  1. 内容调整: 在紧凑高度的屏幕上,由于可视空间较小,您可能需要调整文本、图片等内容的大小,以确保其在较小的屏幕上能够清晰可见且不会显得拥挤。

  2. 布局简化: 考虑简化界面布局,特别是在紧凑高度的情况下,避免使用过多的复杂布局或大量的内容,以保持界面的简洁和清晰度。

  3. 隐藏不必要的元素: 根据屏幕空间的限制,您可以考虑根据尺寸类别隐藏一些不必要或次要的界面元素,以确保用户在紧凑高度的设备上获得更好的体验。

  4. 使用滚动视图: 如果您的应用中包含大量内容,可以考虑将部分内容放置在滚动视图中,以便用户可以在有限的空间内滚动查看更多内容。

  5. 测试和调整: 最重要的是,确保在紧凑高度的设备上进行充分的测试,并根据测试结果对界面布局和元素大小进行调整,以确保用户体验良好。

 

posted @ 2024-02-06 11:51  StarLikeRain  阅读(182)  评论(0编辑  收藏  举报