HTML禁用除图像之外的页面缩放答案

【问题标题】：HTML disable zoom on page apart from the imagesHTML禁用除图像之外的页面缩放
【发布时间】：2025-12-24 10:35:11
【问题描述】：

我正在创建一个简单的 PWA，并试图让它看起来像一个原生移动应用程序，尽管我在捏合时遇到了几个问题。

我已将此代码添加到我的 layout.html（我使用 Flask 作为后端）

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

虽然它确实可以按我的意愿工作，但我希望用户能够放大一些图像，我知道不建议禁用移动设备的可缩放缩放，但真的，这就是我想要的，不除了我拥有的 imgs 标签之外，放大整个页面。我想要一个纯 css/js 解决方案，或者最多不需要 npm 的东西，即使是 cdn 对我也有好处

【问题讨论】：

您能否让链接可点击以单独打开，并使其可缩放（例如，仅查看图像时不要阻止）
只是补充一下，图片是页面的一部分，元数据适用于整个页面，包括其中的标签，比如 img。所以这不适用于您当前的设置。
@M.Sharma 感谢回复，我知道这行不通，我已经尝试过了，只是我需要一个解决方案，我正在寻找它
@scunliffe 对于用户的移动体验来说，这听起来并不好看
您可以为图像设置点击处理程序，将图像放在灯箱上并临时更改<meta> 标记的content 属性，然后在灯箱关闭后将其更改回来。顺便说一句，在我的移动 Chrome 上，我发现了一个覆盖 <meta> 标签并始终允许我放大的设置。嗯，这是一个巨大的安慰！我非常不喜欢网站阻止它。

【解决方案1】：

将不是图像的元素的高度和/或宽度设置为 vh 或 vw。

https://www.w3schools.com/cssref/css_units.asp vh - 视口高度 - 代表屏幕高度的分数。当您放大时 - （例如）字体保持相同大小

div {
   font-size: 2vh;
}

【讨论】：