調整成像素密度的指導方針
系統會自動縮放在 Windows、Windows Phone 或兩者上執行的 Windows 執行階段應用程式,確保無論畫面像素密度為何都能有一致的可讀性與功能性。請遵循這些指導方針,以在針對具有不同像素密度的裝置進行縮放時,讓應用程式的 UI 品質保持不變。
這些指導方針不適用於使用 Silverlight 的 Windows Phone 應用程式。如需 Silverlight 特定指導方針,請參閱Multi-resolution apps for Windows Phone 8。
說明
若不縮放,螢幕上實際的物件大小會隨著裝置的像素密度增加而變小。當 UI 元素太小而無法觸控或文字太小而無法閱讀時,Windows 就會根據下列的縮放倍數來自動縮放您的應用程式:
Windows 市集應用程式:
- 1.0 (不會套用任何縮放,維持 100%)
- 1.4 (140% 縮放)
- 1.8 (180% 縮放)
Windows Phone 市集應用程式:
- 1.0 (不縮放,維持 100%)
- 1.4 (140% 縮放)
- 2.4 (240% 縮放)
Windows 會根據實體螢幕大小、螢幕解析度、螢幕 DPI 以及規格,決定要使用的縮放倍數。如果螢幕規格符合特定的閾值,Windows 則會使用次高的縮放倍數。您可以使用 ResolutionScale (Windows) 或 RawPixelsPerViewPixel (Windows Phone) 決定縮放比例。
系統將自動縮放您的應用程式,但為了確保不論在何種裝置像素密度,UI 看起來都既清楚又能運作,請使用下列指導方針做好縮放應用程式的準備。
可行與禁止事項
使用可縮放向量圖形。Windows 會自動縮放這些格式,不會有明顯的人為誤差。 如果是 JavaScript 應用程式,請使用 SVG。您可以在使用 C#、C++ 或 Visual Basic 的應用程式中,使用 XAML 定義的圖形。
使用針對應用程式套件中的點陣圖影像載入的資源,為各個縮放比例分別提供影像。在影像檔案名稱中包含縮放比例 (例如,Assets\Square7070Logo.scale-100.png)。請注意,Windows 會自動為目前的縮放比例載入正確的影像。 根據 DPI 縮放的範例顯示如何使用為影像載入的資源。
如需與應用程式認證相關的影像需求,請參閱選擇應用程式影像。如需命名慣例的詳細資訊,請參閱快速入門:使用檔案或影像資源 (使用 JavaScript 和 HTML 的 Windows 市集應用程式) 或快速入門:使用檔案或影像資源 (使用 C#/VB/C++ 和 XAML 的 Windows 市集應用程式)。
為不同的縮放倍數建立您的資產時:
- 不要設計 100% 比例的點陣圖影像並手動加以放大。即使您使用高品質的影像程式,都可能產生模糊的結果。
- 請記住,縮小大型的高解析度影像,不一定能夠產生簡潔、清晰的結果。不過,如果沒有原始向量,手動縮小解析度較高的檔案,勝過放大解析度低的檔案。
如果您的應用程式在執行階段使用程式碼載入影像 (例如,如果您使用 DirectX,而非 XAML 或 HTML 建立 UI),請使用 ResolutionScale (Windows) 或 RawPixelsPerViewPixel (Windows Phone) 來判斷縮放比例,並根據該縮放百分比手動載入影像。
在檔案系統影像使用 Thumbnail API。縮圖 API 藉由快取較小的影像版本當成縮圖,使效能達到最佳狀態。如需詳細資訊,請參閱有效存取檔案系統。
載入較大的影像時,請指定影像的寬度與高度,而不是使用自動調整大小功能,以防止配置變更。
使用印刷格線單位與子單位。對於主要格線單位請使用印刷格線定義的 20 像素大小,對於次要格線單位則使用 5 像素,以確保您的配置不會因為像素進位的關係而發生像素位移。可以被 5 像素整除的任何大小單位都不會發生像素進位問題。
對於遠端網頁影像,請使用解析度媒體查詢。 如果您的應用程式使用 JavaScript,而且您有遠端網頁影像,請在執行階段使用 CSS @media 解析度媒體功能與 background-image 屬性取代影像。
不要使用非 5 像素倍數的影像大小。非 5 像素倍數的單位在調整到 140%、180% 與 240% 時會發生像素位移的情形。
適用於設計者
適用於開發人員 (HTML)
適用於開發人員 (XAML)
範例