作为移动网站设计者，除非你只是针对特定设备进行设计，否则你应该经常遇到这样的问题：如何清楚地了解网站运行设备的屏幕尺寸？这个问题长期以来一直困扰着移动设备上的设计师。

例如：

iPhone 的高度为480 像素，宽度为320 像素。

许多诺基亚N 系列设备的宽度为240 像素，高度为320 像素。

许多较新的设备支持宽度和高度倒置的视图。

较旧（且仍然流行）的诺基亚设备的屏幕尺寸从176208 到352416 不等。

Blackberry 屏幕分辨率也有各种尺寸，从160160 到324352。

本文的目的是解释如何为各种移动设备和屏幕尺寸正确设计应用程序视图。首先，提出了小屏幕设计中的两个关键问题：——屏幕和像素尺寸多样性。

处理多样性

现在您可能会问自己“我的设计真的需要迎合所有这些不同的屏幕尺寸吗？”，或者“我应该为每个不同的设备设计一个版本吗？”这完全取决于您的项目的上下文。根据商业需求，有些设计可能只需要满足一个屏幕尺寸—— 或者一台设备就足够了。但是如果项目要求你的设计必须支持大多数主流设备，那么你必须找到一种有效的方法来处理多种屏幕尺寸。

不要惊慌，它并没有那么可怕。在为移动网络设计时，您可以安全地假设页面是可滚动的—— 就像桌面浏览器中的应用程序一样。这样就不用考虑屏幕的高度，可以专注于处理设备屏幕的宽度。幸运的是，DeviceAtlas Explorer 已经为现有设备提供了大量的屏幕宽度统计信息。

如图所示，大部分屏幕宽度主要集中在128、240和176像素这几类——，其余集中的类型：120、130、160、208和220像素——和取值最多的三类也没有太大区别。也有少数屏幕尺寸的宽度为96、101、320 或大于320 像素。屏幕宽度在128px 以下的设备占比非常小，共有469 台设备。

另一点是只有不到5% 的设备宽度大于320 像素。但这个数字未来可能会增加，已经可以看到小屏设备（128、176等）正在逐渐被大屏设备（240+）取代。下图给出了相关分析。

屏幕的分辨率确实很重要，但是还有一点也必须考虑——屏幕的物理尺寸。

‘像素问题’

多年来，设计师主要为大型桌面设备设计视图。尽管显示器的物理尺寸可能不同，但屏幕通常为1024 x 768 像素；常见的像素密度为85 ppi（每英寸像素）。但最近，显示的视图开始有点变化：

华硕Eee PC 900上网本分辨率为1024600像素，像素密度约为133ppi。

Apple iPhone 的分辨率为320480 像素，像素密度为160ppi。

诺基亚E60的屏幕分辨率为416352，像素密度为240ppi。

为了支持多种设备，像素密度的差异会带来新的问题；像素的大小也会影响整个设计的效果。

下图显示了100x100 像素的图像在像素密度为72、144 和240ppi 的设备上的外观。随着图片变小，图像的形状和一些细节会失真。

幸运的是，追求更高像素密度的热潮似乎已经过去，现在超过200 ppi 的设备很少见。这意味着您实际上不需要支持上图中列出的所有像素密度。但是，在设计时，您需要记住，您不能假设所有设备的像素都相同。需要做以下事情：

确定您需要支持的像素密度范围。

在真实设备上测试您的设计，以防您忽略某些极端情况。

使用相对单位（例如em 或百分比）设计和定义布局元素。这将为布局元素提供更真实的大小和位置信息。

随着制造商寻求增加操作系统的灵活性，“像素问题”将受到越来越多的关注。事实上，谷歌的安卓系统已经实现了一个“可能有趣的解决方案”来解决像素问题。 Android 操作系统采用抽象的“dp”（离散像素密度）单位，该单位基于160 ppi 的屏幕尺寸。这允许设计人员使用相对大小来定义字体和其他界面元素，以自动将视图调整为设备的实际尺寸。

我们专注高端建站，小程序开发、软件系统定制开发、BUG修复、物联网开发、各类API接口对接开发等。十余年开发经验，每一个项目承诺做到满意为止，多一次对比，一定让您多一份收获！