JavaScript - prevent page zooming

Question

I have a web application that will be used on a tablet PC (on Internet Explorer). EDIT : not a tablet, but a Windows 7 computer with a touch screen.

The problem is that the user can pinch to zoom on the page (like ctrl-+).

Is there a way to disable it from JavaScript ? (like on mobile devices).

Or maybe change the User Agent to act like an iPad for example ? Will it work ?

Why not just use ``? See https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html — j08691, Jul 18 '14 at 13:41
possible duplicate of [Disable zooming of the page in desktop web browsers using Javascript/Jquery](http://stackoverflow.com/questions/14050841/disable-zooming-of-the-page-in-desktop-web-browsers-using-javascript-jquery) — dammkewl, Jul 18 '14 at 13:41
@NarekMamikonyan: That is _not_ a Media Query, that is simply a viewport meta tag. — CBroe, Jul 18 '14 at 14:07
_“Or maybe change the User Agent to act like an iPad for example ? Will it work ?”_ – changing the User Agent will not make the browser itself act any differently … — CBroe, Jul 18 '14 at 14:09

morkro · Answer 1 · 2014-07-18T13:58:35.483

6

Use

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

in the <head> section of your document to prevent scaling the website on mobile devices. Important here is user-scalable=no which makes the trick.

Edit

Made some more research and you also got the option to add:

<meta name="MobileOptimized" content="640">

While content="640" is the width you want to set and behaves like <meta name="viewport" content="width=640,user-scalable=no">.

Read more about here and here.

edited Jul 18 '14 at 13:58

answered Jul 18 '14 at 13:41

morkro

4,336
5
25
35

Thanks, but it is not a mobile device. Will it work with IE ? – Gab Jul 18 '14 at 13:45
A tablet pc is a mobile device ;) Mobile doesn't mean only smartphones but tablets as well. And yes it will work. – morkro Jul 18 '14 at 13:46
https://dl.dropboxusercontent.com/u/9197067/test.html doesn't work. Am i I forgeting something ? In fact it is not a tablet, but a "touch screen computer" and it's running on Internet Explorer – Gab Jul 18 '14 at 13:52
You forgot `user-scalable=no`. – morkro Jul 18 '14 at 13:53
Thx again, but it still doesn't work. (I edited the link). Are you sure that it works with IE ? Do I have to change the user agent of the page ? – Gab Jul 18 '14 at 13:56
Unfortunately not, it seems to be for Windows Phone IE version only... I need it wih a standard IE on Windows 7. Thanks anyway – Gab Jul 18 '14 at 14:07
Second time I've seen this meta tag used. This does not work on a standard browser on a touch screen (tablet) pc. – JRSofty Feb 23 '17 at 06:17

score 4 · Answer 2 · edited Aug 22 '17 at 19:05

You can disable zoom in browser by Ctrl+ or Ctrl- or Using Ctrl Key + Mouse wheel Up or down by this code.

$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109'  || event.which == '187'  || event.which == '189'  ) ) {
        event.preventDefault();
     }
    // 107 Num Key  +
    // 109 Num Key  -
    // 173 Min Key  hyphen/underscor Hey
    // 61 Plus key  +/= key
});

$(window).bind('mousewheel DOMMouseScroll', function (event) {
       if (event.ctrlKey == true) {
       event.preventDefault();
       }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
teste

How to do that without Jquery, but JS only? – Ini Aug 07 '19 at 12:45 — Ini, Aug 07 '19 at 12:45

JavaScript - prevent page zooming

2 Answers2