Bootstrap 响应式站点 Ingores 视口设置答案

【问题标题】：Bootstrap Responsive Site Ingores Viewport SettingBootstrap 响应式站点 Ingores 视口设置
【发布时间】：2013-06-06 16:49:14
【问题描述】：

为什么我们在 320 像素宽的窗口中的响应式网站在手机上的缩放比例与在桌面浏览器上的缩放比例不同

问题原来是 Bootstrap 的 v2.3.2 responsive-utilities.less 文件中的此更新。

@-ms-viewport{
  /* comment this out!!! */
  width: device-width;
}

当我们注释掉这一点时，移动 320 像素浏览器的渲染与桌面 320 像素浏览器的渲染相同。

我们不必进行任何其他更改。也就是说，在我们的站点中可以有 1500px 的图像，并且我们不必更改现有的 viewport 元标记，如下所示：

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

一个后续问题：@-ms-viewport 行到底是干什么用的？

【问题讨论】：

【解决方案1】：

在你的 CSS 中有问题的图片上添加 100% 的宽度，这应该可以解决所有问题。

编辑：

css 中的 ms-viewport 标签实际上是根据 W3 规范实现 viewport 标签的标准方式。 Trent Walton 有一个很棒的 post 并链接到解释规则的 few more。

我不确定为什么该规则会导致问题，我已将它与多个网站结合使用，从未遇到过问题。

【讨论】：

【解决方案2】：

试试这个。

<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />

【讨论】：

【解决方案3】：

你可以设置完整的属性如下:)

<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=1" name="viewport" />

【讨论】：

【解决方案4】：

我也有这个问题，你应该检查是否可以在 css 中调整它或停止某些组件的响应脚本。

不要在谷歌中选择现成的“停止引导响应脚本”，它不会很好地工作，它会破坏你的导航栏响应能力。

【讨论】：