Question

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

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

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

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

那么，有没有办法让Bootstrap成为渲染移动设备，或者我是不是在编写媒体查询和自定义CSS？

Answer 1

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

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

将该css文件添加到项目后，您可以在所需内容的父div上调用force-xs（或force-sm，force-md或force-lg）力。然后，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>

Answer 2

我没有方便的链接，但我真的只是读到了这个：

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

强制Bootstrap渲染移动友好

2 个答案: