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

Answer 1

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

但是，您可以(并且应该)使用以下 CSS 来解决移动设备上的缩放问题:

header {
    position: fixed;
    ...
}

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

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