CODEWITHSUNDEEP
javascripthtmlzooming
Gab
Gab

Reputation: 1920

JavaScript - prevent page zooming

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 ?

Upvotes: 6

Views: 11617

Answers (2)

Felipe Guimaraes
Felipe Guimaraes

Reputation: 39

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

Upvotes: 4

morkro
morkro

Reputation: 4675

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.

Upvotes: 6

Related Questions