禁用 div 缩放，但允许缩放页面（备用 div）答案

【问题标题】：Disable zoom on a div, but allow zoom on the page (an alternate div)禁用 div 缩放，但允许缩放页面（备用 div）
【发布时间】：2012-12-02 22:21:39
【问题描述】：

有没有办法禁用 div 或网站上任何特定元素的缩放？例如，如果我希望页面是可缩放的，而不是#Header div，有没有办法让一个可缩放，而另一个不可缩放？

基本上，当您在移动设备上缩放时，它也会缩放标题，但我希望标题始终为固定大小（不可缩放）。

我知道您可以使用此代码来禁用整体缩放：

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

【问题讨论】：

【解决方案1】：

遇到同样的问题，最终禁用平移/缩放

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

并通过这个伟大的库选择性地重新启用它

无需太多配置即可使用。

我的html结构如下

<body>
  <header>Sticky unzoomed header</header>
  <main id='main'>Zoomable content</main>
</body>

然后我在主要元素上启用了全景缩放

const PanZ = require('@thesoulfresh/pan-z')
new PanZ().init(document.getElementById('main'))

【讨论】：

【解决方案2】：

如果没有巧妙的技巧，您将无法做到这一点。

但是，您可以（并且应该）使用以下 CSS 来修复移动设备上的缩放问题：

header {
    position: fixed;
    ...
}

@media only screen and (max-width: 720px) {
    header {
        position: absolute;
    }
}

此代码在显示宽度小于或等于 720px 时启用position: absolute，并且页眉成为页面的一部分，而不是固定在顶部。

【讨论】：

理论上是可以的，看看这家伙的回答：stackoverflow.com/questions/15233076/…
这是一个类似的问题和相同的解决方案吗？ stackoverflow.com/questions/29674936/… >> 不适合我
使用this 检测触摸和混合触摸/鼠标设备，然后将标题或固定元素的样式值更改为absolute。像这样在移动或触摸输入设备上进行缩放时，固定元素不会破坏网站的其余部分，而是可以根据浏览器和操作系统以及大多数用户规范（缩放级别等）本机缩放。
我什至会说，通常在桌面以及移动和混合触控/鼠标设备的用户缩放设置上固定为绝对值。未来证明，让浏览器和操作系统处理缩放，用户满意，可访问性授予，完成。请记住，网站在缩放时看起来响应不是您的责任！这是用户的决定，因此用户希望放大页面的每个部分，而不仅仅是内容。所以从缩放中排除某些 div 是不好的。
我试过了，但没用@AleksejKomarov。你能提供一个可运行的例子吗？（不在 SO sn-p 中，因为 SO sn-ps 在 Android 手机上不可运行 - 我已经发布了关于此的元 SO 请求）

【解决方案3】：

如果您使用 angular，有一种方法可以为您的标题 div 提供一个 id，然后在控制器中编写以下代码：

document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');

我在我的项目中使用过，效果很好..

【讨论】：

【解决方案4】：

简而言之，你当然可以做到。

您可以捕获窗口调整大小事件并根据从各种新窗口和内部宽度和高度属性计算的 dpi 变化调整浮动 div 的大小。

因此，当您放大时，您希望缩小浮动 div 以使其保留原始 dpi，反之亦然。

这将是一个史诗般的小提琴 - 很快重新审视这个答案，因为我可能不得不做这样的事情。已经注意到一些跨浏览器与 dpi 的不一致，所以是的，很有趣。

【讨论】：

【解决方案5】：

我认为你不能直接这样做。一种可能的选择是通过 js 事件检测缩放并相应地缩放元素。

另一种选择是“打破” CTRL 键以禁用缩放您的网站，但这只是一个很大的禁忌。

【讨论】：