如何在 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;
  }
}

应该是 1170px 来匹配 col-lg 或 970px 来匹配 col-md。确保上述内容低于您的引导程序包含，以便它覆盖，这应该可以工作。

然后，使您的 (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>