viewporthandler.js

/*!
 * viewport handler
 *
 * for tablet: 1024px fix
 * others: width=device-width
 * iPhone: +scaleFix
 */
(function(){

	/* desktop page width */
	var pageWidth = 1024;
	
	/* fix for iPhone rotate-scale feature */
	function scaleFix(){
		var viewportmeta = document.querySelector('meta[name="viewport"]');
		document.addEventListener("gesturestart", function(){
			viewportmeta.content = 'width=device-width, initial-scale=1.0';
		}, false);
	}

	/* ua detection */
	var ua = (function(){
		var ua = {};
		var navigator = window.navigator;
		var platforms = [
			{ property: 'platform', regex: /iPhone/i, identity: 'iPhone' },
			{ property: 'platform', regex: /iPod/i, identity: 'iPod' },
			{ property: 'userAgent', regex: /iPad/i, identity: 'iPad' },
			{ property: 'userAgent', regex: /Android/i, identity: 'Android' },
			{ property: 'userAgent', regex: /Opera Mini/i, identity: 'OperaMini' }
		];
		for(var i=0, l=platforms.length, platform; i<l; i++){
			platform = platforms[i];
			ua[platform.identity] = platform.regex.test(navigator[platform.property]);
		}
		ua.AndroidTablet = ua.Android && !/mobile/i.test(navigator.userAgent);
		ua.tablet = ua.iPad || ua.AndroidTablet;
		return ua;
	})();

	/* handle viewport */
	if(ua.tablet){
		document.write('<meta name="viewport" content="width=' + pageWidth + '">');
	}else{
		if(ua.iPod || ua.iPhone && !ua.OperaMini){
			document.write('<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">');
			scaleFix();
		}else{
			document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
		}
	}

})();