0

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

笔记：

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

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

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

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

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

4

2 回答 2

2

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

实际上，我在我的一个应用程序Housters中做了类似的事情。（如果您想为我的答案提供一些可视化，请访问Google Play 商店。）我将用伪代码回答，因为您已经提供了您可能使用的可能产品的分布。

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

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);

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

于 2014-03-08T06:49:14.913 回答
1

Since you are using a webview, you could abandon trying to do it via javascript, and go for the much easier (once you learn it) solution of responsive web design.

See for example this: http://responsivedesign.is/develop/css/css3-multiple-columns And change the size of your browser. The number of columns gets from 3 to 2, and then from 2 to 1 as you make your browser window shorter.

Or look at this example: http://www.greenpeace.de/ Again, start making your browser window, and you will see that the design changes.

Al that is happening with css only and it is much lighter for your application

于 2014-03-08T10:59:26.793 回答