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

Question

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

现在我正在使用一种方法，当用户使用应用程序时，应用程序将使用用户使用的手机型号发送请求。服务器端将为该手机选择正确的 HTML 模板。这意味着我必须为每部手机编写一个 HTML 模板。考虑一下现在手机型号的增加，我认为这不是一个明智的主意。

我希望如果有人可以帮助我提出解决此问题的解决方案。无论是基于用户手机型号动态生成 HTML 模板的解决方案，还是创建 HTML 的通用方法都适合所有移动显示。

谢谢！

Answer 1

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

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

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

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/

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

希望对你有帮助。

Answer 2

尝试调整您的设计以按相对大小进行缩放。 Android 有一种针对不同设备调整应用程序大小的技术，您应该这样做并为一系列设备创建通用站点模板。

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

Answer 3

我绝对会推荐给电话间隙看看 (http://phonegap.com/)

另外，你绝对应该在你的 CSS 中使用百分比来兼容所有分辨率（包括台式机和笔记本电脑）

能够说这是我的网站的样子的日子已经一去不复返了，你最好让你的分辨率匹配它！

还可以考虑只提供两种类型的网站，一种是移动网站（所有图片都变小了），另一种是桌面版的图片更全。