Web 应用程序 HTML 在移动设备上搞砸了答案

【问题标题】：Web Application HTML messed up on mobileWeb 应用程序 HTML 在移动设备上搞砸了
【发布时间】：2015-09-20 03:15:37
【问题描述】：

使用 MeteorJS 开发了一个 Web 应用程序并将其部署在 MeteorJS 云上。它在使用计算机时效果很好，但是当尝试通过移动设备访问它时，一切看起来都很大。

我没有太多使 Web 应用程序在移动设备上兼容的经验，但我对自己需要做什么有点迷茫。请指教。

Git：https://github.com/jalapagos/SimpleCalorieCounter

【问题讨论】：

您的自述文件中的链接似乎已损坏，它表示该地址没有部署任何站点。你能仔细检查一下吗？
是的，它现在可以工作了。尝试通过移动设备访问它，您会看到应用程序是如何崩溃的。
部署的 URL 似乎仍然被破坏（仍然得到没有站点部署的地址）。也就是说，我克隆了它并查看了 - 标记/CSS 中似乎没有任何响应代码。您需要查看下面链接的 Bootstrap 指南，并使用适当的容器/网格系统来实现您想要实现的目标，Meteor 不会自动做出任何移动响应。

标签： mobile web meteor

【解决方案1】：

在看到您的应用上线后，您似乎没有为您的布局和某些页面元素使用任何 Bootstrap 类。

我建议您使用bootstrap grid system 让您的应用程序响应。 Google Chrome 开发工具设备模式是一个非常方便的工具，可以检查事物在不同设备中的外观。这是您的应用在 iPad Mini 设备模拟器中的样子。

编辑：添加分步说明以开始使用引导程序

这是你需要做的：

为您的应用调整basic bootstrap 模板。请务必在 <head> 标签的开头包含三个 <meta> 标签。请参阅下面的@jeremeyK 的答案。

注意：在这个主模板中包含与 CSS 和 JS 文件相关的引导程序，甚至您的自定义 caloriecounter.css 文件是不需要必要的，因为 Meteor 会这样做为你。你有包twbs:bootstrap，它将包含你的引导相关文件。

了解bootstrap grid 系统的工作原理。基本上你可能想考虑一个简单的布局，如下所示：

红色文本是您需要添加以获取布局的引导类。您可以看到顶部导航栏有一个类navbar，而较小的部分/侧边栏有col-xs-12 和col-md-3 类，较大的部分有col-xs-12 和col-md-9 类。 col-xs-* 适用于非常小的屏幕设备，而col-md-* 适用于中等屏幕尺寸。

这些类在这里的意思是，对于小部分，如果屏幕非常小 (xs)，那么该区域应该覆盖窗口的整个宽度。如果屏幕是中等大小，那么让它只占窗口的 1/4，为表格部分腾出一些空间。

准备好基本布局后，转到应用程序的每个组件，例如navbar、buttons、modal 等，并按照为每个组件提供的示例代码修复 HTML 标记。

您可以非常轻松地完成这些事情，您只需要按照文档中的指南进行操作即可。另请阅读下面@adamwolf 的解释。

【讨论】：

在我提出申请后，你会建议如何弄清楚网格系统布局？我以前没有使用过网格系统布局，所以我对如何处理它有点困惑，特别是因为我已经构建了我的应用程序。
@halapgos1 请逐步查看编辑部分，了解如何使用引导网格系统，没有比我提供链接的官方文档更好的地方了。让我们知道进展如何。

【解决方案2】：

Have you added a viewport meta tag?

<meta name="viewport" content="initial-scale=1">

【讨论】：

【解决方案3】：

抱歉，还不能发表评论。添加到tsega。 bootstrap 非常简单，只需添加类，bootstrap 就会为您完成。 http://getbootstrap.com/css/#grid

网格系统基于 12 列，通过添加类，对于每一行，您应该使列加起来为 12。您可以将它们链接在一起，例如 class="col-xs-12 col-md- 6 col-lg-3" 这就是说，在小屏幕上，元素宽度应该是 100%，在中屏幕上，元素应该是 50%，而在大屏幕上，元素应该是 25%。

【讨论】：