按像素密度缩放的指南

项目
05/19/2015

Windows 运行时应用（在 Windows、Windows Phone 或两者上运行）自动由系统缩放以确保一致的可读性和功能，无论屏幕的像素密度如何。当应用为不同像素密度的设备进行缩放时，按照这些指南保持应用 UI 的质量。

这些指南不适用于使用 Silverlight 的 Windows Phone 应用。有关 Silverlight 特定的指南，请参阅 Multi-resolution apps for Windows Phone 8。

标准平板电脑和 HD 平板电脑之间像素浓度的差别

描述

在不缩放的情况下，屏幕上的对象的物理大小会随着设备像素密度的增加而变小。当 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 通过缓存较小版本的图像用于缩略图来优化性能。有关详细信息，请参阅高效访问文件系统。
指定图像的宽度和高度，而不是使用大小自动调整功能，从而防止在加载更大的图像时改变布局。
使用版式网格单位和子单位对主网格单位使用版式网格定义的 20px 大小，而对副网格单位使用 5px 大小，从而确保布局不会因像素舍入而出现像素偏移。任何可被 5px 整除的大小单位不会产生像素舍入。
针对远程 Web 图像使用分辨率媒体查询。如果你的应用使用 JavaScript ，并且其中包含远程 Web 图像，请使用具有 background-image 属性的 CSS @media 分辨率媒体功能，在运行时替换图像。
不要使用未调整大小到 5px 的倍数的图像。如果单位不是 5px 的倍数，则当放大到 140% 和 180% 时会产生像素偏移。