GJDesigns GJDesigns - 8 months ago 236
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' />


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.