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

Question

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

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

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

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

score 7 · Accepted Answer

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

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

header {
    position: fixed;
    ...
}

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

简而言之，您当然可以做到这一点。

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

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

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

score 0 · Accepted Answer

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

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

score -4 · Accepted Answer

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

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

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

5 回答 5