GJDesigns GJDesigns - 1 year ago 446
CSS Question

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



Answer Source

In short: You can't do that.

However, you can use conditional CSS to fix zoom issues on mobile devices:

Here is an example code:

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.

Simple, and does the job.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download