Menu
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 ?
335
To disable the zooming option with the multi-touch gesture we can use surefox browser but still, a user can zoom in or out by double tapping on the screen. We can use the <meta> tag to disable zoom in and out on a mobile web page.
The viewport <meta> tag prevents the user from scaling This means that the URL in question contains a viewport <meta> tag with the attribute user-scalable set to '0' or 'no', which prevents the user from zooming in or zooming out.
Method 1: Using outerWidth and innerWidth Property: It is easier to detect the zoom level in webkit browsers like Chrome and Microsoft Edge. This method uses the outerWidth and innerWidthproperties, which are the inbuilt function of JavaScript.
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
answered Sep 20 '22 13:09
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.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
