Apple裝置螢幕尺寸和方向

StarLikeRain發表於2024-02-06

表格中包括了各種型號的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. 測試和調整: 最重要的是,確保在緊湊高度的裝置上進行充分的測試,並根據測試結果對介面佈局和元素大小進行調整,以確保使用者體驗良好。

相關文章