如何在不同的移动平台上以相同的方式显示内容？

Question

我希望在我的移动应用程序上显示一个动态生成的HTML页面。此HTML文件是固定结构的。包括表单、图像和按钮。然而，当涉及到不同的移动平台时，比如ios和android。也有不同的手机，比如三星的安卓或其他公司的手机。显示结果不同。他们中的一些人非常糟糕。这个问题对于android系统来说比较严重，因为有很多不同的公司在使用这个系统。

服务器端将为该电话选择正确的HTML模板。这意味着我必须为每个电话编写一个HTML模板。考虑到这些天增加手机型号，我不认为这是一个明智的想法。

我希望有人能帮我想出一个解决这个问题的办法。无论是基于用户手机型号动态生成HTML模板的解决方案，还是创建HTML的通用方法，都适用于所有移动显示。

谢谢!

Answer 1

如果我正确地理解了你的问题，我强烈建议你使用Twitter Bootstrap来设计你的html页面。这是非常容易使用的，有了它，你可以设计网页，根据屏幕调整自己的大小。twitter bootstrap中定义的响应式css为您处理所有屏幕尺寸，并根据屏幕尺寸动态呈现html页面，而不会妨碍/扭曲html代码的外观和感觉。

您可以从这里获取源代码并了解有关它的所有内容http://twitter.github.com/bootstrap/

这是一个使用twitter boot制作的演示页面。您可以尝试在浏览器窗口中打开它，然后调整窗口大小以查看页面内容如何重新排列

http://brocknunn.com/bootstrap-untame/

下面是一些教程，可以帮助你快速掌握Twitter Bootstrap

http://untame.net/2012/07/twitter-bootstrap-part-1-what-is-bootstrap-anyway/

http://untame.net/2012/07/twitter-bootstrap-part-2-design-a-responsive-homepage/

我刚刚在我的一个Android应用程序中使用了它，在那里我有自定义的html页面。它为我节省了大量的精力和时间。我只需要花几个小时来学习如何在html页面中安排事情，然后我就都准备好了。我希望这将帮助您极大地减少您的手动工作，并节省大量时间。

希望能有所帮助。

Answer 2

试着调整你的设计，让它们以相对的大小缩放。Android有一种技术可以为不同的设备调整应用程序的大小，你应该做同样的事情，为一系列设备创建一个通用的站点模板。

例如，使用百分比，并为屏幕尺寸超过5英寸的设备提供不同的模板。

Answer 3

我绝对建议你看看phone gap (http://phonegap.com/)

此外，你绝对应该在css中使用百分比，以兼容所有分辨率(包括台式机和笔记本电脑)

能够说这就是我的网站外观的日子一去不复返了，你最好让你的分辨率与之相匹配！！

还可以考虑只提供两种类型的站点，一种是移动端(所有图片都变小了)，另一种是桌面，它有更大尺寸的图片。