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

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

说清楚一点，我希望该网站在平板电脑上响应，但在

@media screen max width:360px

上显示桌面版本。我知道这很奇怪，但我的客户想要这样，我不知道为什么

---

谢谢

是的，您显然可以编程

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

---

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

如果您想这样做，您必须根据屏幕的宽度动态更改视口标记

viewport

meta标记通过强制浏览器使用

devicewidth

作为视口的宽度，使移动设备上的响应设计成为可能。通过取消此限制，大多数移动设备将在其宽度范围内撒谎，以获取完整的站点。使用javascript，您可以根据页面宽度动态更改它

首先，在HTML

head

元素中包含标记：

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

$（窗口）。调整大小（函数（）{
var mobileWidth=（window.innerWidth>0）？
window.innerWidth：
屏幕宽度；
var视口=（移动宽度>360）？
'宽度=设备宽度，初始刻度=1.0'：
‘宽度=1200’；
$（“元[名称=视口]”）.attr（'内容'，视口）；
}).resize（）；

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

以下是一个屏幕截图：

---

话虽如此，我将与您的用户一起对此提出建议。
这是一篇我刚刚吐出来的文章

---

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

因此页面的实际宽度由

.container

定义。因此，我从未尝试过这一点，但我认为您应该：

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

全宽平板电脑，其他一半
半宽平板电脑，1/4其他
半宽平板电脑，1/4其他

这是什么意思？什么链接？你看到过使用

引导构建的站点的例子吗？哦，是的。我想在平板电脑上做出反应。仅在移动屏幕上显示“@media screen max width:360px”，以显示桌面版本。如何显示？它没有足够的空间。请显示所需布局的示例。是的，它没有足够的空间，用户必须左右移动屏幕才能显示整个站点。我知道这很奇怪，但我的客户希望：）谢谢，它有点工作，但有一个bug。它首先获得移动版本，然后是桌面版本，然后返回到移动版本。。。等。该网站正在移动版和桌面版之间设置动画。@RahmanSharif，获取更新的代码。我也注意到了这个问题。jQuery使用视口宽度作为站点宽度，因此它可以连续地来回切换<代码>窗口。innerWidth

获取实际宽度，因此它应该是好的。好主意，但不幸的是，这不起作用。Bootstrap的所有响应都是根据页面/视口的大小执行媒体查询，而不是

.container

元素。您的修复程序将保留该网站的移动版本，但只是使其无法在屏幕上显示。这是一个例子。请注意缩小浏览器窗口的宽度时会发生什么。@KyleMit，缩小浏览器时看到的是我期望看到的……需要滚动桌面版本。我想我不明白他想让手机“宽”1200像素，然后缩小。因此，从这个角度来看，JS解决方案是有意义的。在您的中，较大的容器实际上不会将视图更改为桌面的显示方式。它只是使一个更大的小视图。当您重新调整视口时，页面实际上会假装更大，您会看到完整的桌面元素，就像类

visible lg

@KyleMit一样，我没有看到任何我不希望看到的东西。正如我试图用我的HTML演示的那样，如果按照我建议的方式进行操作，则必须将列xs-*和可见xs放在列lg-*和可见lg所在的位置，以便它们看起来相同。至于你的观点（因为我承认），我的方式可能需要为菜单系统编写额外的媒体查询，等等，这将比JavaScript视口调整更不方便。