Ternstyle

When creating mobile friendly websites there is much to consider. From a usability standpoint the ability to zoom as well as a seamless transition from portrait to landscape are at the top of the list.

This article addresses the iPhone issue that occurs when a mobile friendly website viewed in mobile Safari that allows a user to zoom transitions from portrait to landscape and automatically zooms in. The zoom effectively cuts off the view of much of the site dependent on how far in the mobile friendly site allows a user to zoom.

Let’s see some code and talk about it.

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

Let’s break down what Safari is being told here.

minimum-scale=1.0

This parameter tells Safari that a user should only be allowed to zoom out to the actual width of the web page. So if the web page is 320 pixels wide a user will only be able to zoom out to 320pixels.

maximum-scale=10.0

This parameter tells Safari to allow a user to scale to 10 times the size of the site.

initial-scale=1.0

This sets the zoom to the actual size of the site upon loading the web page.

So…these parameters allow a user when using their iPhones to zoom in and out when viewing your web page. Unfortunately, allowing zooming on your web pages creates a problem. When zoom is enabled and a user turns their phone changing the view of your web page from portrait to landscape Safari automatically zooms in. This does NOT happen when zoom is turned off. When zooming is disabled on your web page the view of your web page will be displayed properly within the viewport at 100%.

To disable zoom you can do the following:

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" />

So in essence you can either have zooming or you can have proper viewing of your pages on orientation change. This is unfortunate and unacceptable. As such, I went looking for a solution and found the following Javascript courtesy of Jeremy Keith:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
     var viewportmeta = document.querySelector('meta[name="viewport"]');
     if (viewportmeta) {
          viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
          document.body.addEventListener('gesturestart', function() {
               viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
          }, false);
     }
}

In essence this solution turns zooming off until a user performs the two finger gesture for zooming. When a user attempts to zoom the above Javascript will turn zooming on and allow a user to zoom.

There are two problems I find with this solution.

1. At times (if not all times) the zooming does not turn on the first time a user attempts to zoom.
2. After a user zooms for the first time, the smooth orientation change fails and when changing to landscape Safari automatically zooms in again.

This solution only works if you want to allow a user to smoothly transition between portrait and landscape before zooming. Once they have zoomed the smooth transition is disabled. This was unacceptable for me. Unfortunately, I have not found a perfect solution to all the issues above. I have however found one I consider to be better.

My solution:

1. Turns off zooming by default
2. Turns zooming on when a user begins a gesture (attempts to zoom)
3. Once a user removes a finger or fingers from the screen, waits a second and turns the zoom off

This is not an ideal solution. There are certainly holes.

The main problem with turning zooming on during gesture start is that the zooming isn’t actually activated until the second gesture. So, if I attempt to zoom I am unable to. If I attempt to zoom a second time the zooming has been turned on from the first attempt and now I am able to.

Also, the zooming cannot be turned off directly after a user stops touching the screen. Otherwise it would work like so:

1. User places fingers on the screen
2. User starts a gesture to zoom
3. Zooming is turned on
4. Zoom does NOT work
5. User removes fingers from screen
6. Zoom is turned off

That said, here’s the code:

The HTML meta tag:

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

The Javascript:

var mobile_timer = false,viewport = document.getElementById('viewport');
	if(navigator.userAgent.match(/iPhone/i)) {
		viewport.setAttribute('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
		window.addEventListener('gesturestart',function () {
			clearTimeout(mobile_timer);
			viewport.setAttribute('content','width=device-width,minimum-scale=1.0,maximum-scale=10.0');
		},false);
		window.addEventListener('touchend',function () {
			clearTimeout(mobile_timer);
			mobile_timer = setTimeout(function () {
				viewport.setAttribute('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
			},1000);
		},false);
	}

The Javascript with jQuery

var mobile_timer = false;
if(navigator.userAgent.match(/iPhone/i)) {
	$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
	$(window).bind('gesturestart',function () {
		clearTimeout(mobile_timer);
		$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=10.0');
	}).bind('touchend',function () {
		clearTimeout(mobile_timer);
		mobile_timer = setTimeout(function () {
			$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
		},1000);
	});
}