Question

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

以下是我尝试过的内容。我的全局视口设置：

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

我还尝试添加像

这样的css代码段

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

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

所以处理过类似问题的人请给我一些建议。感谢。

Answer 1

来自Bootstrap documentation：

禁用网页回复的步骤



忽略the CSS docs

中提到的视口<meta>

使用单个宽度覆盖width上每个网格层的.container，例如width: 970px !important;请确保这是在默认的Bootstrap CSS之后。您可以选择使用媒体查询或某些selector-fu。

来避免!important

如果使用导航栏，请删除所有导航栏折叠和展开行为。   对于网格布局，请使用.col-xs-*类作为中/大类的补充或替代。不用担心，超小型设备网格可以扩展到所有分辨率。

有条理地省略视口

动态操作viewport的最佳方法是使用JavaScript。将视口meta元素设为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>

覆盖样式

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

Answer 2

以下示例可以为您提供所需内容。请注意，我直接在css中定义了@viewport。

<强> CSS

.col-md-2 {
  height:200px;
}
@viewport {
  width:device-width;
  initial-scale:1;
}

@media (min-width: 1000px) {
.col-md-2 {
    background:#ff0000;
    width:100%;
    zoom:.1;
  }
}
@media (max-width: 1000px){
.col-md-2 {
    background:#fff000;
    width:200px;
  }
  @viewport {
    width:1000px;
    initial-scale:1;
    zoom: 1;
  }
}

<强> HTML

<div class="container">
    <div class="col-md-2"></div>
</div>

这里是link到该示例的工作版本。如您所见，当调整浏览器大小时，缩放系数会发生显着变化。

最后，您应该注意到@viewport目前不是正式标准。 This页面包含支持的浏览器列表。

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

2 个答案: