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

Question

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

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

谢谢！

Answer 1

如果你想这样做，你将不得不根据屏幕的宽度动态地改变你的视口标签。

该viewportmeta标签是通过强制浏览器使用的是什么使响应式设计可在移动设备上device-width的宽视口。通过取消此限制，大多数移动设备将在其宽度上撒谎以获取完整站点。使用javascript，您可以根据页面宽度动态更改它

首先在您的 HTMLhead元素中包含该标签：

<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();      

这是 Fiddle 中的一个工作演示

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

这是一个屏幕截图：

话虽如此，我会与您的用户一起建议不要这样做。
这是一篇关于添加桌面移动切换按钮的快速文章

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