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

Question

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

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

谢谢!

Answer 1

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

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

首先将标记包含在您的 HTML head 元素中:

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

然后我们将监听调整大小事件并根据您的业务规则更改视口(viewport):

$(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

Note: Desktop browsers ignore the viewport tag so this will not have any affect on your development machine. In order to test these changes, you can open up the chrome debugger tools and emulate a mobile device.

截图如下:

---

综上所述，我会与您的用户一起反对这种做法。
这是我刚刚在 Adding a Desktop Mobile Toggle Button 上发表的一篇快速文章

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