禁用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

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

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

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