ternstyle - Lehigh Valley, Allentown, Bethlehem, Easton, WordPress, Lehigh Valley web design, web programming, web development, lehigh valley web hosting, content management tools, website plugins, WordPress plugins, WordPress Themes, php libraries, php classes, javascript libraries, javascript classes, jQuery plugins, web programming, free web software, free php classes, free software

  • New PRO version of the Automatic Video Posts Plugin for WordPress ™!

    The easiest WordPress™ and YouTube® integration available

    It’s as simple as adding your channels and playlists and the plugin does the rest. Your videos will be automatically imported and embedded in your posts; thumbnails and all!

    Check it out now!
  • EVENT PLUGIN FOR WordPress ™!

    ternCal is the New Ultimate WordPress ™ Event System!

    Featuring repeating events, Google Calendar integration, ICAL and Outlook Support, month, week, and day views, WordPress ™ short code for listing events, a color coded legend and much much more...

    Check it out now!

Reset iPhone zoom on orientation change to landscape

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
My solution allows a second to elapse. If the user attempts to zoom again within that second the action to disable to zoom is cancelled. The problem with the one second time lapse is that a user could change the orientation of the phone to landscape within that second and you’d see Safari zoom in and then zoom out quickly when the second ends and the zooming is disabled. It’s not entirely seamless.

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);
	});
}

Home > Blog > Reset iPhone zoom on orientation change to landscape

  • Sakeer Smile

    Hi,
    I am also having the same issue what are you explaining about. I tried all your guide line which you have mentioned above but nothing works fine for me.

    For the below JS code I am getting an error that document.body[null] is not an object

    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);
    }
    }

    and for the other two JS and JS with JQuery codes my site is getting zoomed again as it was previously even after using those codes

    • Anonymous

      The error is most likely due to the code running before the tag is loaded in your document. You’ll need to either place the code in the footer of your page(s) or wrap it in a function that is called using the window’s onLoad event.

  • http://www.mathewporter.co.uk/ Matt Porter

    Thanks guys, i managed to hash your jQuery to get around an issue… basically i required the the a  viewport to be slightly different for ipad users so that they were given the full site layout in portrait and landscape, with mobile devices to be served a different viewport tag to see the reponsive layout.

Copyright © 2010 Ternstyle Inc. All rights reserved.
site design: ternstyle.us
Lehigh Valley Website Design