过去十年移动设备的爆炸式增长使设备碎片化问题更加严重。尽管这对最终用户有利，但设备碎片化对于开发人员来说可能是地狱般的存在。为了使您的应用程序获得最大的曝光率，它必须在尽可能多的设备上运行。但是，虽然业务逻辑保持不变，但 UI 往往需要进行调整以支持可用的屏幕尺寸和外形尺寸。

最简单的例子就是主细节场景。在智能手机上，显示细节将涉及导航到一个新屏幕，而在平板电脑上可能没有必要。

三大移动平台（Android、iOS 和 Windows）中的每一个都提供了自己的处理设备碎片化和加载资源文件（布局、图像等）的方式。Android 允许您将 UI 的不同版本放在单独的文件夹中。

另一方面，Windows 提供了一个改进的 ViewStateManager，使 XAML 中的开发人员能够为每个支持的屏幕尺寸定义不同的可视状态组。在组内使用动画，您可以根据自己的喜好修改 UI - 从切换控件的可见性到更改单个属性。

在 iOS 中，您可以使用通用故事板、尺寸类、布局自定义和“超级有用的预览助理编辑器”来构建自适应布局。

在这篇文章中，我们将向您展示 NativeScript 在处理资源加载时所采用的方法，但在继续之前，我想介绍一些关键术语。

屏幕尺寸 - 用于显示应用程序的物理空间大小。

密度 - 屏幕上任何给定区域内的像素数量。典型的测量单位是每英寸点数 (dpi)。

与密度无关的像素 (dp) - 这是一种虚拟测量单位，允许独立于密度设计布局。有一个用于将 dp 转换为屏幕像素的简洁公式。

px = dp * (dpi / 160)

方向 - 当屏幕的宽度大于高度时，屏幕的方向被认为是横向的。相反，当屏幕的高度大于宽度时，方向是纵向的。方向可以在应用程序的生命周期中随着用户旋转设备而改变。

资源文件 - 从布局文件 (.xml) 到样式表 (.css) 和图像的任何内容。

如何在您的 NativeScript 应用程序中支持多种屏幕尺寸？

NativeScript 与 Android 相似，在加载资源时采用了文件名限定符的概念。

[文件名称].[限定符].[文件扩展名]

NativeScript 支持三种类型的限定符，这些限定符根据屏幕尺寸、移动平台和设备方向启用资源加载。

屏幕尺寸限定符

屏幕尺寸限定符使您能够使用与密度无关的像素 (dp) 来指示系统根据屏幕的大小加载哪个资源文件。屏幕尺寸限定符派上用场的典型场景是当您想要区分最受欢迎的设备屏幕时。

• 320dp - 典型的手机屏幕（240x320 ldpi、320x480 mdpi、480x800 hdpi 等）。
• 480dp - 一款类似于三星 Note 的中等尺寸平板电脑。
• 600dp - 一款 7 英寸平板电脑（600x1024 mdpi） - Barnes & Noble Nook
• 720dp - 一款 10 英寸平板电脑（720x1280 mdpi、800x1280 mdpi 等） - Motorola Xoom

有了这些知识，您可以为以上每个尺寸创建单独的资源文件。

minWH[dp 值] 指示系统在屏幕的较小尺寸（宽度或高度）至少为 dp 值时加载特定的布局文件。minWH[dp 值]限定符不依赖于设备的方向。

minW[dp 值]和 minH[dp 值]类似于 minWH[dp 值]但仅作用于一个维度，并且依赖于方向。

平台限定符

平台限定符允许您根据托管平台加载单独的资源文件 - Android、iOS 或 Windows*。平台限定符的典型场景是当您希望通过提供单独的样式表使您的应用程序符合原生平台的样式指南时。

* 对 Windows 的支持即将推出！

方向限定符

方向限定符使您能够在加载资源文件时考虑设备的方向。使用 land 代表横向模式，使用 port 代表纵向模式。

现在您已经了解了如何使 NativeScript 加载特定资源，我想以一些关于开发支持多种屏幕尺寸的应用程序时的技巧来结束。

始终最好在真实设备上进行测试。如果您无法获得真实的设备，请确保使用模拟器，例如 Genymotion^[1]。此外，不要害怕玩弄虚拟设备的屏幕尺寸和密度选项。

只为所需内容设计和开发。但是，仍然要努力涵盖目标平台上最受欢迎的设备和屏幕尺寸。

使用与密度无关的像素和转换公式：px = dp * (dpi / 160)

感谢您的阅读，如果您有任何问题或评论，请随时在 NativeScript 论坛 或以下评论中分享。

---

^[1] Genymotion 是一款 Android 模拟器，包含一整套传感器和功能，以便与虚拟 Android 环境进行交互。使用 Genymotion，您可以在各种虚拟设备上测试您的 Android 应用程序，以进行开发、测试和演示目的。