Before:
After:
When designing your website, you may want to ensure that users see it in a consistent format across all devices, without the option to zoom in or out. Whether it’s for a visually cohesive experience or a specific design choice, here’s how you can disable zoom functionality on both desktop and mobile platforms in Wix Studio.
Step 1: Understanding the Code for Disabling Zoom
The code we’ll use includes two main parts:
A meta tag that limits zooming on mobile devices.
JavaScript functions that intercept zoom actions on both desktop and mobile, ensuring users can’t zoom in through common methods like pinch-zoom or Ctrl + Scroll.
Step 2: Adding the Code to Your Wix Studio Website
To add this code, go to Settings > Custom Code in your Wix Studio Editor. Once there, paste the following code into your website's header to apply it site-wide.
Code to Disable Zoom Functionality on Both Desktop and Mobile
<!-- Disable pinch-to-zoom on mobile --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <!-- Disable zooming on desktop and mobile --> <script> // Prevent Ctrl + Scroll zoom on desktop document.addEventListener('wheel', function(event) { if (event.ctrlKey || event.metaKey) { event.preventDefault(); } }, { passive: false }); // Disable zoom on mobile through touch gestures document.addEventListener('touchmove', functions(event) { if (event.scale !== undefined && event.scale !== 1) { event.preventDefault(); } }, { passive: false }); </script>
If the code not working knock me here, I have the pemium code that will work 100% for any kind of website: https://wa.me/+8801717691382
How the Code Works:
Meta Tag: The <meta name="viewport"> tag is a common approach for limiting z oom on mobile devices. Setting user-scalable=0 and maximum-scale=1 prevents mobile users from zooming in using pinch gestures.
JavaScript for Desktop: By adding an event listener for the wheel event, we can intercept attempts to zoom in with Ctrl + Scroll on desktops. This prevents users from zooming on desktops using keyboard shortcuts.
JavaScript for Mobile: The touchmove listener captures any attempt to zoom by touch gestures on mobile devices. If the event's scale property isn’t 1 (indicating a zoom action), we use preventDefault() to cancel it.
Testing Your Wix Studio Site
After adding the code, preview your site on both mobile and desktop devices to make sure zooming is indeed disabled. Note that while these methods are effective, some advanced browser settings or extensions may still override them.
Comments