Disable zoom on a div, but allow zoom on the page (an alternate div)

问题

Is there a way to disable zoom on a div, or any particular elements on a website? For example, if I wanted the page to be zoomable, but not the #Header div, is there a way to make one zoomable, and the other not zoomable?

Basically, when you zoom on a mobile device, it zooms the Header too, but I want the header to be a fixed size at all times (not zoomable).

I know that you can use this code to disable zooming overall:

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

回答1:

You can't do that without clever hacks.

However, you can (and should) use the following CSS to fix zoom issues on mobile devices:

header {
    position: fixed;
    ...
}

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

This code enables position: absolute when display width is less or equal 720px, and header becomes the part of the page, rather than being fixed on top.

回答2:

I don't think you can do that directly. One possible option would be to detect the zooming through js events and scale elements accordingly.

Another option would be to "break" the CTRL key to disable zooming on your website, but that's just a big no-no.

回答3:

In shorter, you certainly can do that.

You can trap window resize events and resize your floating div according to the dpi change calculated from the various new window and inner width and height attributes.

So, when you zoom in, you want to shrink the floating div so it retains the original dpi, and vice versa.

This would be an epic fiddle - revisit this answer soon, since I may have to do such a thing. Already noticing some cross-browser inconsistencies with dpi, so yeah, fun.