Mobile 移动设备上的Web应用程序HTML混乱不堪

使用MeteorJS开发了一个web应用程序，并将其部署在MeteorJS云上。它在使用电脑时效果很好，然而，当试图通过移动设备访问电脑时，一切看起来都非常大

我没有太多在移动设备上兼容web应用程序的经验，但我只是有点迷失了我到底需要做什么。请告知

---

Git:

在看到你的应用程序直播后，你的布局和一些页面元素似乎没有使用任何类

我建议您使用，使您的应用程序响应。Google Chrome Dev tools设备模式是检查不同设备外观的一个非常方便的工具。以下是您的应用程序在iPad迷你设备模拟器中的外观

编辑：添加逐步说明以开始引导

以下是您需要做的：

为你的应用程序调整模板。确保在打开

标签后立即包含三个

标签。见下文@jeremeyK的答案 注意：此主模板中包含的引导与CSS和JS文件相关，甚至您的自定义

卡路里计数器.CSS

文件都是不必要的，因为Meteor会为您这样做。您有一个包

twbs:bootstrap

，它将为您提供与引导相关的文件

看看这个系统是如何工作的。基本上，您可能需要考虑一个简单的布局，例如：

红色文本是需要添加以获取布局的引导类。您可以看到顶部导航栏有一个类，而较小的部分/侧栏有

col-xs-12

和

col-md-3

类，较大的部分有

col-xs-12

和

col-md-9

类。

列xs-*

适用于非常小的屏幕设备，而

列md-*

适用于中等屏幕尺寸

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

一旦基本布局就绪，请转到应用程序的每个组件，如、、等，并根据为每个组件提供的示例代码修复HTML标记

您可以非常轻松地完成这些工作，只需遵循文档中的指南即可。也请阅读下面@adamwalf的解释

---

对不起，现在还不能评论。添加到tsega。bootstrap非常简单，只需添加类，bootstrap就可以为您完成。

网格系统基于12列，通过添加类，对于每一行，您应该将列添加到12。您可以将这些链接在一起，例如class=“col-xs-12 col-md-6 col-lg-3”

---

这就是说，小屏幕上的元素宽度应为100%，中等屏幕上的元素宽度应为50%，大屏幕上的元素宽度应为25%

自述文件中的链接似乎已断开，它表示没有在该地址部署任何站点。你能再检查一下吗？是的，现在可以用了。尝试通过移动设备访问它，您可以看到应用程序是如何崩溃的。已部署的URL仍然显示为已中断（仍然获得未部署站点的地址）。这就是说，我克隆了它并查看了一下-在标记/CSS中似乎没有任何响应代码。您需要查看下面链接的引导指南，并使用适当的容器/网格系统来实现您想要实现的目标，Meteor不会自动使任何移动响应。在我完成应用程序后，您建议如何确定网格系统布局？我以前没有使用过网格系统布局，所以我对如何使用它有点困惑，特别是因为我已经构建了我的应用程序。@halapgos1请参阅编辑的部分，了解如何使用引导网格系统，没有比我提供链接的官方文档更好的地方了。让我们知道进展如何。

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