Improved version of JavaScript fix for the iOS viewport scaling bug. See http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ , also http://adactio.com/journal/4470/

iphone-viewport-scaling-bug-fix-original.js

// Original code form http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
	for (i=0; i<metas.length; i++) {
		if (metas[i].name == "viewport") {
			metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
		}
	}
	document.getElementsByTagName('body')[0].addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
	for (i=0; i<metas.length; i++) {
		if (metas[i].name == "viewport") {
			metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
		}
	}
}

iphone-viewport-scaling-bug-fix.js

// My rewritten version
(function(d) {
	var meta = d.querySelector('meta[name="viewport"]');
	if (!meta) return;
	meta.content = 'width=device-width,minimum-scale=1.0,maximum-scale=1.0';
	d.addEventListener('gesturestart', function(){
		meta.content = 'width=device-width,minimum-scale=0.25,maximum-scale=1.6';
	}, false);
}(document));

I’d love to re-use the argument var instead of creating a new one (scales), but I can’t think of a flexible enough variable name. :)

@mathiasbynens Perhaps just re-use the passed firstTime variable instead of creating the new scales? :P

@cheeaun Yeah that’s what I’m talking about. I’d have to rename the variable for clarity though, and I can’t think of a good name that makes sense.