强制 Bootstrap 呈现移动友好

Question

我正在使用 Google Apps Scripting 进行响应式设计，并且运行遇到了一些问题。所有网站内容都通过 iFrame 沙箱传输，这使我无法设置元视口。这意味着无论我在什么设备上查看应用程序，它都被视为桌面应用程序。

例如，在 Galaxy S4 上查看网络应用会显示完整的 1080x1920 视图。

Google 创建沙盒 iframe 并将其设置为设备的分辨率。他们不允许您创建元元素，通过 JavaScript 创建元元素对您没有任何好处，因为您无法在沙盒之外修改内容。页面加载后，您可以缩放 window 并且元素将按预期调整大小，但这对我在移动设备上没有好处。

我能想到的最好办法是在页面加载后检索 navigator.userAgent，然后在事后修改每个元素。远非理想。

那么，有没有办法欺骗 Bootstrap 渲染移动设备，或者我是否坚持编写媒体查询和自定义 CSS？

Answer 1

我手边没有link，但我真的只是读到这个：

您可以下载仅包含移动媒体查询的 Bootstrap CSS 版本，然后删除媒体查询，以便移动 CSS 在所有设备上加载。

Answer 2

我有一个类似的问题（在模式中，而不是 iframe）所以创建了一个相当冗长但基本的 css 页面来解决它：

https://github.com/shawntaylor/bootstrap-force-device

将 css 文件添加到项目后，您可以在父级 force-xs（或 force-sm、force-md 或 force-lg）上调用 force-xs =26=]你要强制的内容。然后 CSS 强制内部内容表现得像在 xs 设备上一样。

<span class="force-sm">
  <div class="col-sm-6 col-md-4">
    <h1>I want to make this behave like it's on an sm device</h1>
    <h2>Even when it's on a desktop</h2>
    <p>Or within a window that thinks it's a desktop</p>
    </div>
</span>

强制 Bootstrap 呈现移动友好

Force Bootstrap to render mobile friendly

google-apps-script

responsive-design

twitter-bootstrap-3