Question

在挖掘之后，我不确定这是否有可能在有条件地覆盖很多CSS类之外。有什么我想念的吗？如果viewport在桌面浏览器上运行，我会很高兴，因为在使用它的移动设备上显示桌面视图是微不足道的。但我似乎找不到任何方法来设置或伪造Bootstrap读取的值，以了解何时进入移动视图。有什么方法可以＆＃34;技巧＆＃34; Bootstrap认为尺寸仍然是桌面尺寸？我已经尝试在.container和html标签上设置宽度，这确实引入了水平滚动条，但由于该网站最初是从头开始响应地构建的，所以页面内的所有内容仍然会翻转到移动视图。仍然必须为实际的移动设备维护移动视图。

这种情况也不太可能是理想的，但这是我想要兑现的客户要求。任何策略都会非常感激。谢谢！

Answer 1

使用标记上的CSS scale（）转换函数来扩展内部的所有内容。

html {
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    width: 200%;
    height: 200%;
    margin: -50% -50%;
}

Answer 2

好的，我能够通过一些轻微的手段来做到这一点。我根据this SO帖子制作了一个单独的大小覆盖文件。然后我独立制作了＃34; no-mobile＆＃34;我们的site.less文件的版本通过设置这样的LESS文件：

@import "Site.less";
@import "variable-overrides.less";

由于LESS以CSS的从上到下覆盖的方式工作，因此我们在我们自己的站点LESS文件中覆盖了任何地方，我们使用了Bootstrap屏幕大小变量。 LESS编译器还自动创建辅助CSS文件。我使用Bootstrap本身做同样的事情来创建无响应的Bootstrap（通过导入bootstrap.less然后变量覆盖它下面的LESS文件）。

确定我是在真正的桌面浏览器还是移动浏览器上有点困难。据我所知，特征检测在这种情况下不起作用（屏幕宽度不起作用，因为桌面浏览器可以缩小到相同的尺寸）。所以我最终使用了OS检测。我知道，不是最好的解决方案，但它是客户想要的。我最终使用Sniffr库来确定我所使用的操作系统，并且它通过我的测试似乎工作得很好（虽然我知道它显然可以被愚弄，它只会让用户获得不同的视图网站）。在我知道我所使用的操作系统之后，我会像this一样动态链接CSS。

所以是的，有点hacky，但到目前为止似乎工作得很好。我真的希望viewport能够在桌面浏览器上运行，因为这会让事情变得如此简单，但这不是一个糟糕的解决方案。 LESS允许我们所有的LESS都在一个文件中，所以创建第二个CSS文件绝对没有重复，并且它的变量覆盖系统绝对是必要的。

也许这会对其他人有用！

在桌面上禁用Bootstrap移动视图的任何简单方法？

2 个答案: