Question

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

我没有太多使用移动设备兼容网络应用程序的经验，但我对我究竟需要做什么感到有点迷失。请指教。

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

Answer 1

在看到您的应用后，看起来您还没有使用任何Bootstrap类来进行布局和部分页面元素。

我建议您使用bootstrap grid system让应用响应迅速。 Google Chrome开发工具设备模式是一种非常便捷的工具，用于检查不同设备的外观。以下是您的应用在iPad Mini设备模拟器中的样子。

编辑：添加了逐步说明以开始使用bootstrap

以下是您需要做的事情：

为您的应用调整basic bootstrap模板。确保在<meta>标记打开后立即包含三个<head>代码。请参阅下面的@ jeremeyK＆＃39答案。

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

了解bootstrap grid系统的工作原理。基本上您可能需要考虑如下的简单布局：

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

这些类的含义是，对于小部分，如果屏幕非常小（xs），则该区域应覆盖窗口的整个宽度。如果屏幕是中等大小，那么让它占据窗口的1/4，为桌面部分留出一些空间。

准备好基本布局后，请转到应用的每个组件，例如navbar，buttons，modal等，并根据示例代码修复HTML标记给每个组件。

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

Answer 2

Have you added a viewport meta tag?

library(pracma)
fun <- function(x, y) 4*(x-y)*(1-y)*(y < x)
integral2(fun, 0, 2, 0, 1, reltol = 1e-10)
#=============
$Q
[1] 2.833363

$error
[1] 2.394377e-11

Answer 3

很抱歉，还没有发表评论。添加到tsega。 bootstrap非常简单，只需添加类和bootstrap就可以了。 http://getbootstrap.com/css/#grid

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

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

3 个答案: