如何在Bootstrap 3的移动屏幕上显示桌面版？

Question

如何在Bootstrap 3上的移动屏幕上显示桌面版？ 我不想要一个切换桌面/移动版本的链接。我只想在手机屏幕上显示桌面版。

要明确的是，我希望网站能够在平板电脑上做出响应，但在@media screen max-width: 360px上显示桌面版。我知道这很奇怪，但我的客户想要那个，我不明白为什么！

谢谢！

Answer 1

如果要执行此操作，则必须根据屏幕宽度动态更改视口标记。

viewport元标记是通过强制浏览器使用device-width作为视口的宽度，使移动设备上的响应式设计成为可能的标记。通过消除此限制，大多数移动设备将在其宽度上撒谎以获得完整站点。使用javascript，您可以根据页面宽度

动态更改它

首先在HTML head元素中加入代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后我们将听取resize事件并根据您的业务规则更改视口：

$(window).resize(function() {
    var mobileWidth =  (window.innerWidth > 0) ? 
                        window.innerWidth : 
                        screen.width;
    var viewport = (mobileWidth > 360) ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
}).resize();      

Here's a working Demo in Fiddle

  

注意：桌面浏览器会忽略视口标记，因此这对您的开发计算机没有任何影响。为了测试这些更改，您可以打开chrome调试器工具并模拟移动设备。

这是截图：

---

总而言之，我会与您的用户一起提供反对的建议 这是我刚刚在Adding a Desktop Mobile Toggle Button

上发表的一篇快速文章

阻止最终用户做他们想做的事情通常不是一个好主意。您的第一个目标应该是开发一个适用于小型设备的网站。如果用户确实想要看到缩小的视图，那么您可以在页面底部为它们提供切换开关。

Answer 2

是的，您可以明显地将lg，sm和xs计划为一种方式，而另一种方式只有md。

所以你会有类似的东西：

<div class="col-lg-12 col-md-6 col-sm-12 col-lx-12">...<div>

也不要忘记viewport meta tag。在小型设备上渲染会有所帮助。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

或根据您的需要进行修改。

Answer 3

因此页面的实际宽度由.container定义。所以，我从来没有尝试过这个，但我认为你应该做的不是JavaScript修改：

@media (max-width: 360px) {
  .container {
    width: 1170px;
  }
}

匹配col-lg或970px以匹配col-md应为1170px。确保上面的内容属于你的引导程序，以便它覆盖，这应该可行。

然后，让你的（col-md或col-lg）和col-xs具有相同的值列宽和不同于平板电脑的col-sm，并且事情应排成一行，例如

<div class='col-md-6 col-xs-6 col-sm-12'>full-width tablet, half others</div>
<div class='col-md-3 col-xs-3 col-sm-6'>half-width tablet, 1/4 others</div>
<div class='col-md-3 col-xs-3 col-sm-6'>half-width tablet, 1/4 others</div>