Adobe Certified ExpertAdobe Certified Instructorapple-logo-whiteLeft ArrowRight ArrowLeft ArrowRight ArrowDan Rodney Logoshopping-cartFacebookLinkedInTwitterYouTubesubmenu-arrow-down

Ever tried to pinch-to-zoom on a website and been annoyed that you can’t? Sadly this is something the website disabled on purpose. There’s a line of code they added to the webpage to prevent zooming. As a web developer I don’t believe in doing this, because it’s a major hindrance to many readers. Luckily there’s a workaround. You can make a bookmarklet that will let you enabling zooming on any website!

You can create the bookmarklet with a desktop browser or directly on your mobile device, but it’s a little easier on a desktop. Below are the instructions for both.

Make the Bookmarklet Using a Desktop Browser

Drag this link into your bookmarks: Enable Page Zoom
After your desktop’s bookmarks sync to your mobile device you’ll be able to use it.

Make the Bookmarklet Using a Mobile Browser

Most mobile browsers don’t let you bookmark the JavaScript that makes this work. So you’ll have to create a temporary bookmark, and then edit it (as described below).

  1. Copy this code:
    javascript:document.querySelector('meta[name=viewport]').setAttribute('content','width=device-width,initial-scale=1,maximum-scale=10,user-scalable=yes');

  2. Bookmark any webpage (such as this one).
  3. Edit the bookmark’s URL (address) and paste the code.
  4. Name the bookmark something useful, such as Enable Page Zoom.

Using the Bookmarklet

When you’re on a webpage that won’t let you zoom, choose your Enable Page Zoom bookmarklet. Try zooming again and it should now work!

Tags: Mobile Web Development Apple iOS iPhone iPad Android

Left Arrow Back to Blog

Follow @danrodneytweets or subscribe to my RSS feed for updates.