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

发布于 2024-12-25 16:35:47 字数 460 浏览 3 评论 0原文

我想知道如何强制 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; }
}

原文

I would like to know how to force Android browser (preferably using pure CSS3) to not change viewport's width when user zooms in/out with his/her fingers ?

I have multiple media-queries on page aiming to different viewport widths. But anytime user zooms in/out the page viewport width is changed so layout of the page is reordered and I don't this to happen. I want Android browser to "remember" its initial viewport size and when user zooms in/out I want Android browser to JUST zoom, but not change the viewport size.

Is this possible with CSS ? Thank you for any help in advance.

EDIT: My media queries:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

善良天后 2025-01-01 16:35:47

您可以使用viewport元标记来修改移动浏览器上的视口具有一定的固定大小。这将迫使浏览器根据视口的本机宽度在初始加载时进行放大。您可以使用此固定宽度作为参考点来设置页面上其他元素的大小。

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

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

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

#content {
   width: 600px;
}

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

You can use the viewport meta tag to modify the width of the viewport on mobile browsers to be a certain fixed size. This will force the browser to zoom in on initial load based on what the native width of the viewport is. You can use this fixed width as a reference point to set the size of other elements on your page.

For example, if you wanted to set the width of the viewport to be 600px you would include this line in your HTML <head>:

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

You can then set the width of other elements on the page knowing how wide it will be in proportion to the viewport. For example this element will take the whole width of the mobile browser: