Question

我想知道当用户用他/她的手指放大/缩小时，如何强制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; }
}

Answer 1

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

例如，如果您想将视口的宽度设置为600px，则应在HTML <head>中包含此行：

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

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

#content {
   width: 600px;
}

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

Answer 2

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

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

2 个答案: