html - 如何让 bootstrap 网站失去 786px 宽度内的所有响应功能？

Question

这是我的问题。我有一个基于 Bootstrap 的网站，我只是希望它在从宽度小于 768 像素的设备访问时充当无响应网站。当宽度超过 768px 时，它应该像往常一样响应。

下面是我试过的。我的全局视口(viewport)设置:

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

我还尝试添加 css 片段，例如

@media (max-width: 768px) {
  @viewport {
    width: 1024px !important;
  }
}

因为我想让它看起来像宽度是1024px。但这并不像我预期的那样有效。

请有遇到过类似问题的 friend 给点建议。谢谢。

Answer 1

来自 Bootstrap documentation :

Steps to disable page responsiveness

1. Omit the viewport <meta> mentioned in the CSS docs

2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.

3. If using navbars, remove all navbar collapsing and expanding behavior. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

---

有条件地省略视口(viewport)

操纵viewport的最佳方式动态是使用JavaScript。给你的视口(viewport) meta元素a id所以你可以在窗口宽度改变时改变它。例如:

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

<script>
    window.addEventListener('resize', function() {
        var vp = document.getElementById("viewport");
        if (window.innerWidth <= 768) {
            vp.setAttribute('content', '');
        } else {
            vp.setAttribute('content', 'width=device-width, initial-scale=1');
        }
    }, true);
</script>

覆盖样式

只需使用媒体查询，就像您已经做过的那样。