Have you ever run across a web page you could not zoom in the iOS web browser? I have encountered several web sites that prevent the user from zooming on the page with iOS. When I browse these web sites on my iPad, I’m unable to double-tap to zoom in and out and sometimes I can’t use a two-finger spread/pinch gesture to zoom. This is something I do often to read web pages more comfortably on my iPad or my iPod touch, and it’s quite irritating when the web site blocks me from zooming this way.

I have found several workarounds for this annoyance, which I’ll explain here, but if you want the best solution, skip down to the last one.

Good:  “Reader” mode in mobile Safari

You may have noticed the small “Reader” button appearing in the address bar of mobile Safari after the page you are viewing is fully loaded. Pressing this button opens a pop-up window showing the main content of the page in a reader-friendly format with larger fonts, and stripped of extraneous elements. Not exactly the same as zooming, but it often solves the problem of not being able to read comfortably.

Better: “Enable Zoom” Bookmarklet

Bookmarklets are little snippets of JavaScript code that are run from a browser bookmark. With bookmarklets you can have a browser shortcut to do things like share on Facebook or Twitter, blog about the page you are reading, translate to another language, and so on. Enabling zoom function on a web page is another things you can do with a bookmarklet.

But here is the catch… Most bookmarklets are added to a desktop browser by dragging the link to your browsers address bar, but there is no way to do this on a touch device like an iPad or iPhone. So you need a workaround. To add a bookmarklet on mobile Safari, you first need to create a regular bookmark and save it. This bookmark can be anything, so just create it for the page you are on. Then you copy the snippet of JavaScript code and edit the bookmark you just created. Make the bookmark name anything you like (I suggest “Enable Zoom” for this one) and then paste the snippet of code into the address section of the bookmark, and save your changes.

Here is the snippet of code you will paste into the address for the “Enable Zoom” bookmarklet:

javascript:document.querySelector('meta[name=viewport]').setAttribute('content','width=device-width,initial-scale=1.0,maximum-scale=10.0,user-scalable=1');

I suggest moving this bookmarklet to the Bookmarks Bar in mobile Safari if you choose to use it.

_{[via Ask Different: How can I force pinch-to-zoom on some websites?]}

Best: Enable Zoom in iOS Accessibility Settings

When you read this solution, you will have no need for the first two. I can’t think of any disadvantages to going this route. iOS has a zoom option under Settings > General > Accessibility. When enabled, it allows you to zoom in and out by double-tapping with three fingers. This works anywhere, not just mobile Safari, so you can use it to enlarge portions of the screen within other apps. However, one great side effect of this setting is that it forces mobile Safari to ignore the web page code that prevents zooming! 

Now, whether you use the three-finger zoom shortcut or not, you will no longer be blocked from zooming in and out on web pages in the normal way.

_{[via Roger Johansson: The iOS Zoom setting disables maximum-scale=1 and user-scalable=no]}

I hope you find this tip as useful as I have!