使用 Bootstrap 移动查看 Google Apps 脚本答案

【问题标题】：Mobile Viewing for Google Apps Script with Bootstrap使用 Bootstrap 移动查看 Google Apps 脚本
【发布时间】：2015-03-14 12:14:26
【问题描述】：

我正在尝试使用 Google Apps 脚本设计一个移动优先的网络应用程序。

我会尝试在 Google Apps 脚本中复制最基本的引导页面 (http://getbootstrap.com/examples/navbar)。

这是引导页面在我的移动设备上呈现的方式：

但我的页面却是这样加载的（即http://goo.gl/yZpgUg）：

这是我的代码.gs：

函数 doGet() {
  返回 HtmlService
      .createTemplateFromFile('index')
      。评价（）
      .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

我的 index.html 是从 http://getbootstrap.com/examples/navbar 复制和粘贴的，并酌情替换了 CDN。

我认为 HtmlService.SandboxMode.NATIVE 对使其正常工作很重要，但似乎不起作用。

亲爱的世界 - 任何帮助将不胜感激。

干杯。

更新 1 -（感谢您的回复！）

在 IFRAME 中：

IFRAME 控制台错误 (2)：

NATIVE 控制台错误（很多）：

底线 - 显然 GAS 不喜欢它，而且看起来也不是很直接 - 我最终将 GAS 变成了一个 API，它从我需要的电子表格中返回 JSONP - 更直接。感谢您的所有帮助！

【问题讨论】：

【解决方案1】：

我知道你决定走另一条路，但我让它在相同的情况下工作。您可以使用以下代码在 GAS 代码上简单地添加元标记：

var output = HtmlService.createHtmlOutput('Hello, world!');

output.addMetaTag('viewport', 'width=device-width, initial-scale=1');

因此，当您在 doGet 中提供 html 时，请添加元标记。查看此链接了解更多信息：https://developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String)

【讨论】：

【解决方案2】：

显然 Google 无法从他们的服务器加载 Bootstrap，请尝试将所有内容复制到 GAS 并包含在页面中，如 best practices 中所述。测试时也切换回 IFRAME。

【讨论】：

感谢您的回复。我看过那个最佳实践页面——它很有帮助，但我认为主要问题是你不能通过 NATIVE/IFRAME 设置通过 GAS 获得属性——或者至少我不知道如何执行此操作 - 因此 index.html 文件中的“”无法正确显示。如果您知道如何通过 GAS 编辑显示的标题区域，请告诉我。干杯。
不可能，没有或标签属性发生变化，CAJA 不允许这样做，如果您将其中任何一个放在 HTML 中，它们将被替换，但总有一种解决方法。我已经设法让 Bootstrap 在 IFRAME 上工作起来很困难，不知道移动设备。
这就是我的想法 - 引导程序似乎正在工作 - 只是移动查看/视口不起作用。明白 CAJA 不会允许的。