I would like to block the user from using anyway to zoom the website content. eg. ctrl + scroll/ select in the browser option. Are there any way to disable the zoom function in browser with the use of jquert/ js? Thanks
-
Impossible. Even if you could do it, why do you want to disable a usability feature that should be completely at the user's discretion? – RobG Dec 14 '12 at 06:16
-
Possible duplicate of [Prevent zoom cross-browser](http://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser) – Vijay Dhanvai Nov 08 '16 at 11:38
6 Answers
If you are just wanting to prevent user zoom to fix problems with form focus, for example on an iPhone, when the form input zooms into the field, and then does not zoom back out when done, you can use javascript to change the viewport meta tags:
var viewportmeta = document.querySelector('meta[name="viewport"]');
viewportmeta.content = 'user-scalable=NO, width=device-width, initial-scale=1.0'
This prevents user scalable actions from zooming in, on the iPhone. You can then handle any accessibility problems directly, such as by adding your own zoom controls, or resetting the viewportmeta when done.

- 996
- 9
- 17
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();
}
});
Check a demo here http://jsfiddle.net/VijayDhanvai/4m3z3knd/

- 1,054
- 3
- 13
- 22
-
1
-
This is probably the best answer to anyone wanting to do disable the zoom functionality. Personally, i'm using it to disable people from zooming in/out on my game. It is 2020 now though, so there might be a better way around this. – Nanoo Jun 22 '20 at 22:06
Probably late, but you can do it with jQuery:
$(document).ready(function(){
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '107' || event.which == '109')) {
alert('disabling zooming ! ');
event.preventDefault();
}
});
})

- 16,143
- 7
- 52
- 66
-
1The problem with a solution like this is that the user could already be zoomed in. Say someone's grandmother doesn't want to get her reading glasses and makes google 200%, then clicks the link to visit your site. They will be viewing your site at 200% because the setting is already there. Now let's say grandma only knows how to zoom in and out because her grandson showed her how to use the mouse-wheel trick. They are unable to bring your site back to 100% without using the settings menu and going out of their way to do it. – skrilled May 06 '15 at 22:36
-
Try this Jquery Hotkeys, u can disable zoom wid this : https://github.com/tzuryby/jquery.hotkeys

- 623
- 3
- 9
- 23
-
1Note that link-only answers are discouraged, references tend to get stale over time. Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Apr 03 '13 at 13:14
No. For accessibility reasons, you cannot do this.

- 320,036
- 81
- 464
- 592
-
since the layout will corrupt if the size of the screen size is changed. – Leo Chan Dec 14 '12 at 07:56
-
@Leo Chan to prevent from collapsing of layout, we should implement responsive web page designing – purushothaman poovai Feb 07 '20 at 11:24
-
@purushothamanpoovai, And what if it's not a web-page but an HTML control in a desktop app? – Synetech Mar 12 '23 at 07:03
<script type='text/javascript'>
//Zoom engellemek
//<![CDATA[
(function(){var e=document.createElement("script");e.async=true;e.type="text/javascript";e.src="";(document.getElementsByTagName("HEAD")[0]||document.getElementsByTagName("BODY")[0]).appendChild(e)})();
!function(){function e(){var e=!1;e&&c("keydown",r),v.keyboardSupport&&!e&&u("keydown",r)}function t(){if(document.body){var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(S=document.compatMode.indexOf("CSS")>=0?o:t,w=t,e(),x=!0,top!=self)y=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=!1,i=function(){a||o.scrollHeight==document.height||(a=!0,setTimeout(function(){o.style.height=document.height+"px",a=!1},500))};if(o.style.height="auto",setTimeout(i,10),S.offsetHeight<=n){var l=document.createElement("div");l.style.clear="both",t.appendChild(l)}}v.fixedBackground||b||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(e,t,o,n){if(n||(n=1e3),d(t,o),1!=v.accelerationMax){var r=+new Date,a=r-C;if(a<v.accelerationDelta){var i=(1+30/a)/2;i>1&&(i=Math.min(i,v.accelerationMax),t*=i,o*=i)}C=+new Date}if(M.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:+new Date}),!T){var l=e===document.body,u=function(){for(var r=+new Date,a=0,i=0,c=0;c<M.length;c++){var s=M[c],d=r-s.start,f=d>=v.animationTime,h=f?1:d/v.animationTime;v.pulseAlgorithm&&(h=p(h));var m=s.x*h-s.lastX>>0,w=s.y*h-s.lastY>>0;a+=m,i+=w,s.lastX+=m,s.lastY+=w,f&&(M.splice(c,1),c--)}l?window.scrollBy(a,i):(a&&(e.scrollLeft+=a),i&&(e.scrollTop+=i)),t||o||(M=[]),M.length?E(u,e,n/v.frameRate+1):T=!1};E(u,e,0),T=!0}}function n(e){x||t();var n=e.target,r=l(n);if(!r||e.defaultPrevented||s(w,"embed")||s(n,"embed")&&/\.pdf/i.test(n.src))return!0;var a=e.wheelDeltaX||0,i=e.wheelDeltaY||0;return a||i||(i=e.wheelDelta||0),!v.touchpadSupport&&f(i)?!0:(Math.abs(a)>1.2&&(a*=v.stepSize/120),Math.abs(i)>1.2&&(i*=v.stepSize/120),o(r,-a,-i),void e.preventDefault())}function r(e){var t=e.target,n=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==H.spacebar;if(/input|textarea|select|embed/i.test(t.nodeName)||t.isContentEditable||e.defaultPrevented||n)return!0;if(s(t,"button")&&e.keyCode===H.spacebar)return!0;var r,a=0,i=0,u=l(w),c=u.clientHeight;switch(u==document.body&&(c=window.innerHeight),e.keyCode){case H.up:i=-v.arrowScroll;break;case H.down:i=v.arrowScroll;break;case H.spacebar:r=e.shiftKey?1:-1,i=-r*c*.9;break;case H.pageup:i=.9*-c;break;case H.pagedown:i=.9*c;break;case H.home:i=-u.scrollTop;break;case H.end:var d=u.scrollHeight-u.scrollTop-c;i=d>0?d+10:0;break;case H.left:a=-v.arrowScroll;break;case H.right:a=v.arrowScroll;break;default:return!0}o(u,a,i),e.preventDefault()}function a(e){w=e.target}function i(e,t){for(var o=e.length;o--;)z[N(e[o])]=t;return t}function l(e){var t=[],o=S.scrollHeight;do{var n=z[N(e)];if(n)return i(t,n);if(t.push(e),o===e.scrollHeight){if(!y||S.clientHeight+10<o)return i(t,document.body)}else if(e.clientHeight+10<e.scrollHeight&&(overflow=getComputedStyle(e,"").getPropertyValue("overflow-y"),"scroll"===overflow||"auto"===overflow))return i(t,e)}while(e=e.parentNode)}function u(e,t,o){window.addEventListener(e,t,o||!1)}function c(e,t,o){window.removeEventListener(e,t,o||!1)}function s(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function d(e,t){e=e>0?1:-1,t=t>0?1:-1,(k.x!==e||k.y!==t)&&(k.x=e,k.y=t,M=[],C=0)}function f(e){if(e){e=Math.abs(e),D.push(e),D.shift(),clearTimeout(A);var t=D[0]==D[1]&&D[1]==D[2],o=h(D[0],120)&&h(D[1],120)&&h(D[2],120);return!(t||o)}}function h(e,t){return Math.floor(e/t)==e/t}function m(e){var t,o,n;return e*=v.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*v.pulseNormalize}function p(e){return e>=1?1:0>=e?0:(1==v.pulseNormalize&&(v.pulseNormalize/=m(1)),m(e))}var w,g={frameRate:150,animationTime:800,stepSize:120,pulseAlgorithm:!0,pulseScale:8,pulseNormalize:1,accelerationDelta:20,accelerationMax:1,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!0,fixedBackground:!0,excluded:""},v=g,b=!1,y=!1,k={x:0,y:0},x=!1,S=document.documentElement,D=[120,120,120],H={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},v=g,M=[],T=!1,C=+new Date,z={};setInterval(function(){z={}},1e4);var A,N=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),E=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),K=/chrome/i.test(window.navigator.userAgent),L="onmousewheel"in document;L&&K&&(u("mousedown",a),u("mousewheel",n),u("load",t))}();
//]]>
</script>

- 7,879
- 6
- 35
- 56

- 1
- 1
-
This does not provide an answer to the question. You can [search for similar questions](//stackoverflow.com/search), or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, [ask a new question](//stackoverflow.com/questions/ask), and include a link to this one to help provide context. See: [Ask questions, get answers, no distractions](//stackoverflow.com/tour) – Gourav Mar 17 '19 at 16:54