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

Question

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

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

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

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

Answer 1

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

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

header {
    position: fixed;
    ...
}

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

此代码在显示宽度小于或等于 720px 时启用

position: absolute

，并且页眉成为页面的一部分，而不是固定在顶部。

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

面临同样的问题，最终禁用平移/缩放

<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'))

Answer 5

这篇文章似乎找到了一个不错的解决方案，但您可能需要将子组件的高度/宽度设置为 100%：How do I Adapt the

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

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

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

Answer 6

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

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

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