1

为什么我们的响应式网站在 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 线到底是干什么用的？

4

4 回答 4

1

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

编辑：

您的 css 中的 ms-viewport 标签实际上是根据 W3 规范实现 viewport 标签的标准方式。特伦特沃尔顿有一篇很棒的帖子和更多解释规则的链接。

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

于 2013-06-06T18:09:17.120 回答
0

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

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

于 2015-02-18T04:14:10.847 回答
0

尝试这个。

<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
于 2013-06-06T19:51:20.033 回答
0

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

<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=1" name="viewport" />
于 2014-05-19T03:50:47.000 回答