如何在手机屏幕上显示桌面版本，以引导3？

Question

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

为了明确起见，我希望网站能够响应平板电脑，但在@media screen max-width: 360px上显示桌面版本。我知道这很奇怪，但我的委托人想要，我不知道为什么！

谢谢!

Answer 1

如果要这样做，就必须根据屏幕的宽度动态地更改viewport标记。

viewport元标记使得移动设备上的响应设计成为可能，因为它迫使浏览器使用device-width作为视图端口的宽度。通过取消这一限制，大多数移动设备将围绕其宽度来获得完整的站点。使用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();      

这是Fiddle的一个工作演示

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

这是一张截图：

​

​

所有这些话，我将与您的用户合作，建议不要这样做。

以下是我在添加桌面移动按钮上发表的一篇短文

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

Answer 2

是的，很明显，您可以编写lg、sm和xs的程序，但只能用另一种方式编写md。

所以你会有这样的东西：

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

也不要忘记视口元标签。这将在一定程度上有助于在小型设备上渲染。

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

或者根据你的需要修改。

Answer 3

因此，页面的实际宽度由.container定义。因此，我从未尝试过这种方法，但是与其对JavaScript进行修改，我认为您应该做：

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

它应该是1170 md匹配col或970 md匹配col。请确保上面的内容在引导包下面，这样它就会覆盖，并且应该可以工作。

然后，使您的(col-md或col)和col具有相同的值列宽度，并且与您在平板电脑上的值不同，并且应该是一致的。

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