跨平台html5应用程序,单独的设计?

时间:2011-10-31 17:15:59

标签: iphone html5 cordova galaxy xoom

我现在想制作一个适用于所有支持html5的设备的应用程序。最后三个让我难过,因为这些设备的应用程序上几乎没有信息。

它们都有不同的屏幕分辨率,它们都需要单独的设计吗?

iPhone 3Gs/ iPhone 4
Motorola Droid
iPod Touch
iPad 2
Samsung Tab 7”
Motorola Xoom
Sony Tablet S

2 个答案:

答案 0 :(得分:1)

如果您希望它们适合所有设计,您可以使用百分比作为宽度并将所有内容展示到屏幕上。首先设计一切以适应您的最小屏幕分辨率并根据它进行扩展。我的意思是,因为iPhone的分辨率较小,所以首先需要将所有必要的内容都放在iphone上。然后,如果您想要向ipad用户或分辨率更高的用户展示其他内容,您可以使用css或您的编程语言来显示右侧内容面板或者您需要什么来适应额外的空间。

这是没有必要的,因为如果你的左栏是40%而右栏是60%,那么它将在ipad上填充相同但是根据你的内容你很多不需要这么大的空间所以你可以填补其他空间仅在较大的设备上提供信息。

您可以使用JQuery获取屏幕宽度,并为每种类型和布局显示不同的css文件。

祝你好运

答案 1 :(得分:1)

您应该考虑在所有设备和外形尺寸上进行单一体验的用户影响。

电话在房地产方面非常紧张,因此他们通常会进行范式演练。获取一个列表,选择,在堆栈上弹出一个视图,弹出回到列表等...这是一个由房地产决定的导航重流。

平板电脑有更大的空间可供使用,所以你应该利用弹出式视图,多个分割窗格等...

它是HTML5而不是UIKit的事实是无关紧要的。客户需要良好的体验,并期望在不同的外形上有不同的体验。

我建议即使在HTML5应用程序中也要遵循模型视图控制器。尽可能多地将逻辑推送到javascript代码的通用模型集中,并且仅根据视图而不同。和你在UIKit做的一样...

如果您根据房地产大小创建一个通用模型和不同的视图,至少您只构建2(平板电脑与手机)而不是2 *平台数。