Skip to main content
knackforge blog knowledge base

Forbid Zooming in Mobile, Tablet Devices

We all have cognizance about the concepts behind the Responsive Design, this makes us to just use one site across all devices like Desktop, Tablet, Smartphone and even Phablet. We do have N+1 options in Drupal to make a site responsive, to list a few Adaptive Theme, Omega Theme, Lexi Responsive theme, Integration with Twitter Bootstrap, if not all these we can go with CSS Media Queries.

But one key point to be noted in a responsive design is, The viewer of the site either in Tablet or in Smartphone must not have the option to ZOOM (Technically know as pinching). Once the viewer is provided with this feature, the entire look, appearance and design of the site will look devastated. Recently I did a responsive theme, where the site looked so well in stimulators (Firefox Stimulator), But once I made a test in Mobile devices I was left with nothing but disappointment.

My theme never looked like a responsive design in Smartphone nor in Tablet. The only solution that could save me from this disillusion was cutting out the zooming property in mobile devices. To do so I made use of the below code in my html.tpl.php

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

Add the above piece of snippet inside the <head></head> tag in your custom theme's html.tpl.php, and clear all caches (To be on the safer side). If you have no html.tpl.php, then copy thereof from your base theme.

"User-scalable=no" is what does the trick here. This property stops the users from making use of the zooming feature in Mobile devices. Thus the look and appearance can be made consistent through out the Mobile devices as well as the Desktop version. 

To see the functionality of the above code, view this blog in your Mobile device and try to Zoom in (If you can) !