仅在移动设备上启用引导响应答案

【问题标题】：Enable bootstrap responsive only on mobile device仅在移动设备上启用引导响应
【发布时间】：2018-09-12 15:15:37
【问题描述】：

我一直在四处寻找，但没有找到这个问题的答案或解决方案：

我想仅在用户使用移动设备时启用引导响应。换句话说，当用户使用计算机浏览器时，响应将被关闭，这意味着无论用户如何调整窗口大小，我的容器总是有一个最小宽度，并且响应永远不会启动。

有没有办法默认做到这一点？

【问题讨论】：

是的，您可以借助 javascript (jquery) 移动检测来做到这一点。但是如果你需要一些帮助，你必须包括到目前为止你已经完成的 HTML 和 CSS。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

使用引导程序 3：只需向您的容器添加一个新类，例如 cFixed，并且仅在“最小宽度：768px”媒体查询中设置您的容器尺寸等等

@media (min-width: 768px) {
    .cFixed{width:1174px}
}

【讨论】：

【解决方案2】：

我们需要添加一个额外的响应式样式表 css/bootstrap-responsive.css

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

以下是支持的设备

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

响应式实用程序类

【讨论】：

他已经提到了这一点 - “换句话说，当用户使用计算机浏览器时，响应式将被关闭，这意味着无论用户如何调整窗口大小”......你的这个答案仍然有效在浏览器调整大小！
是的，我刚刚提供了有关响应式实用程序类的信息，认为可能会有所帮助。

【解决方案3】：

您可以在 CSS 中按设备宽度分隔响应式和非响应式样式。

@media (max-width: 767px) {
    /* Responsive styling */
    div {
        width: 50%;
    }
    ...
}
@media (min-width: 768px) {
    /* Non-responsive styling */
    div {
        width: 500px;
    }
    ...
}

请注意，这并不能确定设备是否是移动设备。为此，您可以使用开源 JavaScript（即http://detectmobilebrowsers.com/）。

【讨论】：

他已经提到了这一点——“也就是说当用户使用电脑浏览器时，响应式将被关闭，这意味着无论用户如何调整窗口大小”
正确，所以当宽度 >= 768 时，您使用固定宽度设置元素的样式，而当