放大/缩小时如何强制Android浏览器不改变视口的宽度？答案

【问题标题】：How to force Android browser to not change viewport's width when zooming in/out?放大/缩小时如何强制Android浏览器不改变视口的宽度？
【发布时间】：2012-02-05 09:51:17
【问题描述】：

我想知道当用户用手指放大/缩小时，如何强制 Android 浏览器（最好使用纯 CSS3）不改变视口的宽度？

我在页面上有多个针对不同视口宽度的媒体查询。但是任何时候用户放大/缩小页面视口宽度都会改变，因此页面布局会重新排序，我不会发生这种情况。我希望 Android 浏览器“记住”其初始视口大小，并且当用户放大/缩小时，我希望 Android 浏览器仅缩放，但不更改视口大小。

这可以通过 CSS 实现吗？提前感谢您的帮助。

编辑：我的媒体查询：

@media only screen and (min-width : 800px) and (max-width : 999px) {
  #content { width:800px; }
}
@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

【问题讨论】：

请您出示您的媒体查询好吗？
@Michael 当然没问题。我有这两个媒体查询来实际支持三种类型的设备。台式机（宽度 > 1000 像素）、平板电脑和高清智能手机（宽度 800-1000 像素）以及所有其他手机和设备（宽度

标签： android html css viewport android-browser

【解决方案1】：

您可以使用the viewport meta tag 将移动浏览器上的视口宽度修改为某个固定大小。这将强制浏览器根据视口的本机宽度放大初始加载。您可以将此固定宽度作为参考点来设置页面上其他元素的大小。

例如，如果您想将视口的宽度设置为 600 像素，您可以在 HTML 中包含这一行 <head>：

<meta name="viewport" content="width=600px">

然后，您可以设置页面上其他元素的宽度，了解它与视口成比例的宽度。例如，此元素将占据移动浏览器的整个宽度：

#content {
   width: 600px;
}

您可以缩放视口以适应内容，而不是缩放内容以适应视口。

【讨论】：

【解决方案2】：

我建议采用不同的方法，并使用带有缩放限制集的响应/自适应主题。

【讨论】：

很遗憾，我无法更改布局。但是你能更具体一点，你会推荐什么方法？
加载this site后调整浏览器窗口大小。