如何确定移动应用程序中可以合理呈现多少列？ （屏幕尺寸/分辨率/方向）

Posted 2023-02-15

【中文标题】如何确定移动应用程序中可以合理呈现多少列？ （屏幕尺寸/分辨率/方向）

【英文标题】：how to determine how many columns in a mobile app could be rendered reasonably? (screen size/resolution/orientation)

【发布时间】：2014-03-07 22:27:44

【问题描述】：

问题：对于使用跨平台工具开发的移动应用程序，如何确定移动应用程序中可以合理呈现多少列？例如，如何确定是否可以在给定视图的布局中放置额外的列？

注意事项：

ios/android 设备的混合，不同的分辨率，纵向/横向，答案是否在于屏幕的物理尺寸？我认为以像素为单位使用屏幕宽度可能不合适，因为它可能无法指示屏幕的物理尺寸。

例如，为了便于讨论，如果您有一个应用程序将您的数据显示在列中，并且您曾说过为了便于用户阅读而确定（我正在编造这些）：

iPhone 纵向 - 1 列 iPhone 横向 - 2 列 iPad 纵向 - 2 列 iPad 横向 - 3 列

但是，除了 iPad/iPhone 之外，还有所有 Android 设备，因此假设这里需要一种公式/方法来确定在运行时尝试向用户显示多少列。

因此假设您使用的是跨平台开发工具，例如：Corona SDK、Phone Gap、Titanium、MoSync 等

【参考方案1】：

在考虑设备屏幕大小和列大小时，您希望使用与密度无关的像素。

实际上，我在我的一个应用程序Housters 中做了类似的事情。 （如果您想对我的回答进行可视化，请点击Google Play Store。）我会用伪代码回答，因为您已经给出了您可能使用的各种可能的产品。

首先，我确定它是否是平板电脑。这些天来这是相当随意的，但以下公式对我很有效：

var isTablet = Math.min(platformWidthInDP, platformHeightInDP) > 500;

这正确地将我测试过的 Nexus 5、EPIC 4G、EVO 4G、Galaxy S3 和其他设备识别为手机，并将 Nexus 7/10、Tab 7+/10 和其他设备识别为平板电脑。

对于手机，我总是使用 1 列，无论方向如何。它在横向上太被压扁了，尤其是当键盘打开时。

对于平板电脑，我根据希望列很好地适合屏幕来计算相对理想的宽度。我采用最小的屏幕尺寸，将其除以 2，然后确保它至少为 320dp 宽（您可能能够容忍较小的值，具体取决于您的列内容，例如 250dp）。

var minPlatformWidth = Math.min(platformWidthInDP, platformHeightInDP));
var width = Math.max(minPlatformWidth / 2, 320);

这样，即使屏幕尺寸有各种变化，我的列也能很好地填满屏幕。而且它们具有静态大小，因此当用户重新定位设备时不会发生太多的诡计。

【参考方案2】：

由于您使用的是 webview，因此您可以放弃尝试通过 javascript 进行操作，而选择更简单（一旦学习）响应式网页设计的解决方案。

例如看这个： http://responsivedesign.is/develop/css/css3-multiple-columns 并更改浏览器的大小。 当您缩短浏览器窗口时，列数从 3 变为 2，然后从 2 变为 1。

或者看看这个例子：http://www.greenpeace.de/ 再次开始制作浏览器窗口，您会看到设计发生了变化。

仅在 css 中发生的所有事情，它对您的应用程序来说要轻得多