48

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

GJDesigns
  • 485
  • 1
  • 4
  • 7
  • 1
    If you zoom on the entire page or particular on your header? Or further if you touch just the header or the total page? And, btw: Why you want that? The visitor can't see the full page... a bit crappy, eh? – yckart Dec 14 '12 at 22:12
  • 1
    Encountered the same problem and was able to (mostly) solve it: http://stackoverflow.com/questions/27983673/how-to-prevent-bootstrap-fixed-top-navigation-from-zooming-on-mobile/27991099#27991099 – flexponsive Jan 16 '15 at 20:21

5 Answers5

7

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.

Aleksej Komarov
  • 194
  • 1
  • 8
  • It is theoretically possible, check this guy's answer: http://stackoverflow.com/questions/15233076/prevent-that-a-fixed-element-resizes-when-zooming-on-touchscreen – ido Jun 17 '14 at 16:26
  • Is it a similar question with same solution? http://stackoverflow.com/questions/29674936/how-to-prevent-zoom-in-inside-a-popups-on-jquery-mobile >> Not worked for me – the_farmer Apr 16 '15 at 12:59
  • Detect touch and hybrid touch/mouse devices with [this](http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml) and then change the header or fixed element's style value to `absolute`. Like this when zooming on mobile or touch input devices the fixed element(s) do not break the rest of the site but are natively zoomable per browser and OS and most of all user specifications (zoom-level, etc.). – lowtechsun Jan 23 '17 at 11:53
  • 1
    I would even go as far as saying, **generally** on user zoom set fixed to absolute for Desktop as well as Mobile and Hybrid Touch/Mouse devices. Future proof, let browser and OS handle the Zoom, user happy, accessibility granted, done. Remember, it is not your responsibility for the site to look responsive when it is zoomed! That is the user's decision and in doing so the user wants to zoom in on **every** part of the page, not just the content. So excluding certain divs from zooming is not good. – lowtechsun Jan 23 '17 at 12:21
  • 1
    I tried it, but it didn't work @AleksejKomarov. Could you provide a runnable example? (not in a SO snippet, because SO snippets are *not runnable* on Android phones - I already posted a meta-SO request about that) – Basj Feb 14 '18 at 13:04
  • Sadly, it doesn't work for Chrome / Android 5: https://imgur.com/a/Yumvk – Basj Feb 14 '18 at 17:15
1

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.

mkey
  • 535
  • 2
  • 12
1

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.

Dominic Cerisano
  • 3,522
  • 1
  • 31
  • 44
  • Would you have a runnable example @DominicCerisano? Would be super useful, as the the accepted answer doesn't really work (see https://imgur.com/a/Yumvk). – Basj Feb 20 '18 at 14:34
  • As I mentioned, this would be a lot of work since it would require separate implementations for each browser (Chrome, MOZ, etc) and platform (PC, mobile, etc). – Dominic Cerisano Feb 20 '18 at 22:42
  • kindof breaks the intend of zooming. if i (the user) want to zoom something, it is my decision to do so, you (the dev) preventing me from that kind of makes me want to leave the page asap – clockw0rk Aug 05 '20 at 09:43
  • It implements the intended zooming as described by the OP. – Dominic Cerisano Aug 11 '20 at 16:11
1

Faced the same problem an ended up disabling panning/zooming

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>

and selectively reenable it with this great lib

https://soulfresh.github.io/pan-z/?path=/docs/pan-z--pan-z

Works great without much configuration.

My html-structure is as follows

<body>
  <header>Sticky unzoomed header</header>
  <main id='main'>Zoomable content</main>
</body>

Then I enabled panzooming on the main element

const PanZ = require('@thesoulfresh/pan-z')
new PanZ().init(document.getElementById('main'))
Stephan Hoyer
  • 4,792
  • 2
  • 29
  • 26
-4

If you are using angular there is a way to give one id to your header div and then write the following code in controller:

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

I used in my project and it worked well..

Luka Kerr
  • 4,161
  • 7
  • 39
  • 50
pratik
  • 1