Bootstrap响应站点忽略视口设置

Question

为什么我们的响应式网站在320px宽的窗口中，在手机上的扩展方式与在桌面浏览器上的扩展方式不同

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

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

当我们对此进行评论时，移动320px浏览器呈现与桌面320px浏览器相同的效果。

我们无需进行任何其他更改。也就是说，在我们的网站上有1500px图像是可以的，我们没有必要更改现有的视口元标记，如下所示：

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

后续问题：无论如何，@ -ms-viewport行是什么？

Answer 1

在CSS中的违规图像上添加100％的宽度，这样可以解决任何问题。

编辑：

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

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

Answer 2

试试这个。

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

Answer 3

您可以设置如下所有属性：）

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

Answer 4

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

不要在google中选择准备好的“停止引导响应脚本”，它将无法正常工作，这会破坏你的导航栏响应能力。