螢幕大小與中斷點

Windows 應用程式可在執行 Windows，包括平板電腦、桌上型電腦、電視，以及更多的任何裝置上執行。 Windows 生態系統跨越大量裝置目標與螢幕大小，與其針對每個裝置最佳化您的 UI，我們建議設計幾個重要的寬度類別 (也稱為「中斷點」)：

• 小型 (小於 640 像素)
• 中型 (641 - 1007 像素)
• 大型 (1008 和更高像素)

提示

當針對特定中斷點進行設計時，請針對您應用程式，而不是螢幕大小，可以使用的螢幕空間量 (應用程式的視窗) 進行設計。 當應用程式以全螢幕執行時，應用程式視窗會與螢幕大小相同，但當應用程式不是全螢幕時，視窗則小於螢幕。

中斷點

下表描述不同大小的類別和中斷點。

Size 類別	中斷點	一般螢幕大小	裝置	視窗大小
Small	最高 640 像素	20 吋至 65 吋	電視	320x569、360x640、480x854
中	641 - 1007 像素	7 吋至 12 吋	平板	960x540
大型	1008 和更高像素	13 吋以上	桌上型電腦、筆記型電腦、Surface Hub	1024x640、1366x768、1920x1080

為何電視被認定為「小型」？

大部分電視實體都相當大 (40 到 65 英吋是常見) 和高解析度 (HD 或 4k)，設計從 10 英呎遠處觀看的 1080P 電視，和設計坐在桌前一英呎遠觀看 1080p 監視器，是大不同的。 當考慮距離，電視的 1080 像素更像是更近的 540 像素監視器。

XAML 的有效像素系統會自動考量您觀看的距離。 當指定控制項的大小或中斷點範圍時，您實際上是在使用「有效」像素。 例如，您為 1080 像素及更高像素建立回應式程式碼時，1080 監視器會使用該程式碼，但 1080p 電視不會，因為 1080p 電視雖有 1080 實體像素，但只有 540 個有效像素。 在這部分，設計電視與設計小螢幕很雷同。

有效像素與縮放比例

XAML 應用程式會自動調整控 UI 元素的大小，因此在所有裝置和螢幕大小清晰可讀，而且可輕鬆地與其互動。

當您的應用程式在裝置上執行時，系統會使用演算法來規範 UI 元素在螢幕上的顯示方式。 此縮放演算法會考慮觀看距離和螢幕密度 (每英吋像素)，以最佳化感知大小 (而不是實體大小)。 此縮放演算法可確保使用者在 10 英呎遠的 Surface Hub 上看到的 24px 字型，就和在只有幾英吋遠的 5 吋手機上看到的 24px 字型一樣清晰。

因為此縮放系統的運作方式，所以您設計 XAML 應用程式時是使用有效像素，而不是實體像素。 有效像素 (epx) 是虛擬測量單位，用來快速表達配置的尺寸和間距，與畫面密度無關。 (在指導方針中，epx、ep 及 px 會交替使用。)

設計時，您可以忽略像素密度和實際螢幕解析度。 而是應針對大小類別的有效解析度 (以有效像素為單位的解析度) 進行設計 (有關詳細資料，請參閱螢幕大小和中斷點一文)。

提示

在影像編輯程式中建立螢幕模擬時，請將 DPI 設定為 72，並將影像維度設定為您目標大小類別的有效解析度。

四的倍數

在 UWP 應用程式中，UI 元素的大小、邊界及位置應一律為 4 epx 的倍數。

XAML 可透過 100%、125%、150%、175%、200%、225%、250%、300%、350% 和 400% 的縮放水準調整各種裝置。 基礎單位為 4，因為它可以縮放為整數 (例如；4 x 125% = 5、4 x 150% = 6)。 使用四的倍數將所有 UI 元素與整個像素對齊，並確保 UI 元素具有清晰、銳利的邊緣。 (請注意，文字並不具有此需求；文字可以有任何大小和位置。)