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

Posted 2023-03-12

【中文标题】如何在不同的移动平台上以相同的方式显示内容？

【英文标题】：How to show contents in same way on different Mobile Platform?

【发布时间】：2012-11-01 21:33:25

【问题描述】：

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

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

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

谢谢！

【问题讨论】：

为什么不在 webView 中显示 HTML 页面，让操作系统处理移动页面的外观？创建差异。每种设备的 html 模板似乎都非常不可信

【参考方案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 页面中安排事情，我就准备好了。我希望这将帮助您大大减少手动工作并节省大量时间。

希望对你有帮助。

【参考方案2】：

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

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

【参考方案3】：

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

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

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

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