支持多个屏幕大小指南
Windows 和 Windows Phone 应用商店应用可在具有不同屏幕大小和分辨率的各种设备上运行。用户也可以修改屏幕方向，或者持续将其缩小到最小宽度或将它与其他应用并排放置（如果应用在 Windows 上运行）。无论用户在手机、平板电脑、便携式计算机、台式电脑或 PPI 设备上运行你的应用，都请确保它的 UI 美观并可保持功能性。 在设计可适应所有大小和方向的屏幕的 UI 时，请遵循以下指南。
有关使 Windows 应用商店应用适应较窄窗口大小的特定指南，请参阅 Guidelines for resizing to narrow layouts。
说明
你的应用很有可能在各种屏幕大小上运行，它们的范围可能从较小的手机屏幕到中等的便携式计算机屏幕，甚至可能在一体机或 PPI 设备屏幕上运行。你的应用可利用的可查看区域量会有所不同，具体取决于屏幕大小和方向。
.png "平板设备上的示例应用")
.png "大型桌面显示器上的示例应用")
以下术语对于理解按不同屏幕大小进行扩展非常重要。
屏幕大小 |
屏幕的物理尺寸，以英寸为单位。通常测量对角线。 |
屏幕分辨率 |
屏幕支持的像素数量，以水平和垂直维度测量。例如，1366x768。 |
纵横比 |
以宽对高的比例表示的屏幕形状。例如，16:9。 |
这些平台、控件和模板已经设计为适合不同的屏幕大小、分辨率和纵横比。 尽管大部分应用的布局将根据显示器变化自动调整，你仍然必须考虑顶层布局、内容区域、应用导航和领命，以确保它们在大型屏幕上以可预见和直观的方式进行排列。
下表将显示设计你的应用时需要考虑的最重要的屏幕大小。
| 全屏屏幕大小（有效像素分辨率） | 设备描述 |
|---|---|
| 1366x768 | 平板电脑、可转换设备以及许多便携式计算机（纵横比为 16:9）；基线便携式计算机/台式电脑分辨率 |
| 1920x1080 | 较大的便携式计算机和设备（纵横比为 16:9） |
| 2560x1440 | 非常大的一体机设备（纵横比为 16:9） |
| 1280x800 和 800x1280 | 优先纵向显示的较小设备（纵横比为 16:10） |
| 1024x768 和 768x1024 | 优先横向显示的较小设备（纵横比为 4:3） |
| 1371x857 和 857x1371 | 较小设备（纵横比为 16:10） |
| 384x640 | 4.5" 手机（15:9 纵横比） |
| 400x711 | 4.7" 手机（16:9 纵横比） |
| 450x800 | 5.5" 手机（16:9 纵横比） |
| 491x873 | 6" 手机（16:9 纵横比） |
当设计在 Windows 而非 Windows Phone 上运行的应用时，请考虑用户的两个应用共用屏幕时或者将应用调整到最小宽度时可用的屏幕大小。
| 拆分屏幕大小（有效像素分辨率） | 说明 |
|---|---|
| 672x768 | 在 1366x768 的设备上对半拆分的屏幕 |
| 500x768 | 应用的默认最小大小；在 1024x768 的设备上对半拆分的屏幕 |
| 320x768 | 支持的最小宽度为 320 像素的应用的最小大小 |
有关缩放建议，请参阅 Guidelines for scaling to pixel density。
.png "重要的全屏和拆分屏幕窗口大小")
应做事项和禁止事项
- 在可能时，依靠灵活的控件来支持可以自动重新排列的内容。灵活的控件包括 XAML Grid control、CSS 网格、CSS 多列布局和ScrollViewer control。例如，网格控件可根据显示设备的屏幕分辨率弹性调整 UI 的特定部分以充满可用空间，并可以根据可用屏幕控件向不同的单元格分配内容。
- 设计你的应用布局和控件以在最小的屏幕上进行调整并正常工作：
- Windows 应用商店应用的默认最小宽度：500px。
- Windows 应用商店应用的非默认最小宽度：320px。
- Windows Phone 应用商店应用的最小值（不可调整）：384px（纵向）和 640px（横向）。
- UI 和控件必须可在低至最小值（在下面列出）的所有屏幕大小上使用。请考虑以下重要控件：
- 设计你的应用，使其可以在较大屏幕上有效利用空间，并且具有可以自动重新排列的布局。不要留下大片空白空间。
- 测试你的应用是否可以在最重要的设备大小上正常工作。除了在实际设备上测试你的应用，还可以使用针对 Windows 应用商店应用的 Microsoft Visual Studio 模拟器以不同的物理屏幕大小、分辨率和方向来模拟应用的运行。
- 为所有 input fields 字段指定最小大小。最小大小可以在用户调整窗口大小时确保输入字段不会消失。
- 测试应用的输入字段不会被软键盘挡住。
- 谨慎使用绝对定位；如果使用不当，它可能会防止你的 UI 响应窗口大小和方向的更改。使用在运行时计算的定位布局你的 UI，不要硬编码你的布局。
- 为不同的像素密度进行设计。若要了解详细信息，请参阅按像素密度缩放的指南。
仅 Windows 应用商店应用
- 确保你的应用在 500 像素的默认最小宽度也能正常工作。有关具体推荐，请参阅 Guidelines for narrow layouts。
- 如果你的应用在较小尺寸下能够很好地运行，并希望让用户将你的应用保持在屏幕上，则可以将支持 320 像素的非默认最小宽度。
- 请确保用户可以在调整应用大小时继续其当前任务。例如，保持应用的当前页面、滚动条状态、选择和焦点。
- 在所有屏幕大小都支持超级按钮。请确保适当缩放弹出菜单和窗格。
在 Windows 8 中，用户仅可以将应用调整为三个视图状态：全屏、贴靠和填充。在 Windows 8.1 中，用户可以将应用调整到任何宽度（从全屏到最小宽度）。
其他使用指南
对于方向更改的自动支持。
用户可以旋转自己的手机、平板电脑和显示器。只要你的应用没使用固定布局，Windows 就可自动处理横向和纵向。你仅需考虑应用的宽度如何影响其布局。
请参阅下面的固定布局部分，以获取关于何时适合不使用灵活布局的详细信息。
.png "横向和纵向布局")
已调整大小的应用行为（仅适用于 Windows 应用商店应用）
如果用户的屏幕上有多个应用，请注意以下独特的 UI 交互：
- 如果用户调用超级按钮，超级按钮将应用于用户最后使用的应用，不考虑应用的大小或它在屏幕上的位置。
- 屏幕上的每个应用之间都具有手柄。用户通过滑动手柄来调整应用窗口的大小。手柄还将显示哪个应用具有焦点。
- 如果用户使用应用之间的手柄，并尝试将应用宽度调整到小于最小宽度，该应用将离开屏幕。
- 如果用户在屏幕上存在多个应用时旋转设备或显示器，应用不会切换方向。
固定布局
大部分应用可以使用动态布局，它可适应屏幕大小和分辨率更改，并可自动重排内容。但是在某些情况下，你的应用可能需要固定布局。不以内容为重点或依靠图形完整性的应用（例如游戏应用）需要使用固定（绝对）布局。Windows 利用平台内置的“自适应缩放”方法满足这些应用的要求。
如果你确定你的应用需要不会自动适应不同屏幕大小的固定布局，则可以使用自适应缩放方法来让布局填满不同大小的屏幕，如下图所示。
.png "缩放成适应固定布局的游戏")
要实现“缩放以适应大小”方法，请执行以下操作：
为基本线分辨率设计布局，例如，1366x768 像素（电脑/平板电脑）或 384x640 像素（手机）。这是适合大屏幕的布局。
将你的固定内容放置在 ViewBox 控件（ViewBox in JavaScript and HTML 或 Viewbox in C#/VB/C++ and XAML）中。ViewBox 控件可以将固定布局缩放为适合屏幕的大小。
确保将 ViewBox 控件的大小设置为 100% 宽度和高度。
将 ViewBox 的固定大小属性定义为布局的固定像素大小（例如 1366x768 或 384x640）。
选择边框颜色。固定的控件不会根据宽高比或屏幕大小的变化而动态变化，因此“缩放以适应大小”技术会自动居中并为应用内容添加上下黑边（水平或垂直）。你的顶层应用布局的颜色决定了边框栏的颜色。我们建议选择深色（例如黑色）以便与硬件融合，选择中性颜色（例如灰色）来进行凸显，或者选择与应用内容颜色相符的颜色。
提供矢量或高分辨率资源。在大型桌面监视器上，自适应缩放技术可将应用缩放至不同的大小，最大可达应用设计尺寸的 180%（适用于 Windows）或 280%（适用于 Windows Phone）。矢量资源，如可缩放矢量图形 (SVG)、Extensible Application Markup Language (XAML) 或没有缩放痕迹或产生模糊的基元缩放。如果要求光栅资产（如位图图像），请提供 MRT 资产。
以下图像演示了与矢量图像（左）相比，标量图像（右）的尺寸在放大后发生降级的情况。
.png "调整矢量和标量图像大小")
不要在 ViewBox 控件中放置自适应控件。
有关其他关于缩放的推荐，请参阅 Guidelines for scaling to pixel density。
对于设计人员
对于开发人员 (HTML)
对于开发人员 (XAML)
Quickstart: Designing apps for different window sizes
示例