通过viewport缩放页面的代码——Michael Learns To Rock系列

很多游戏原来在设计的时候，是为pc而设计的，分辨率较高，比如设置宽度为900。这些游戏如果想简单修改就兼容移动终端的话，只能通过设置页面viewport来实现，不用修改任何游戏代码，只简单设置viewport就可兼容移动终端。

---

可以封装了一段代码来实现这个功能。

---

(function(){
	function ajustViewport(gameWidth,gameHeight,isLandscope){
		var viewportNode,
		    viewportContent = "",
		    ua = window.navigator.userAgent.toLowerCase(),
		    _width = isLandscope ? Math.max(window.innerHeight,window.innerWidth) : Math.min(window.innerHeight,window.innerWidth),
		    _height = isLandscope ? Math.min(window.innerHeight,window.innerWidth) : Math.max(window.innerHeight,window.innerWidth),
		    rate = _width / gameWidth,
		    rate2 = _height / gameHeight,
		    scalable = ",user-scalable=no",
		    width;
		if (rate > rate2) {
			width = Math.round(_width/rate2);
		} else {
			width = gameWidth;
		}
		if (ua.indexOf("android") >= 0) {
			viewportContent = "width=" + width + scalable + ",target-densitydpi=320";
		}else if(ua.indexOf("ios") >= 0 || ua.indexOf("iphone") >= 0 || ua.indexOf("ipod") >= 0 || ua.indexOf("ipad") >= 0){
			viewportContent = "width=" + width + scalable;
		}
		viewportNode = document.querySelector('meta[name=viewport]');
		if(viewportNode){
			viewportNode.content = viewportContent;
		}else{
			viewportNode = document.createElement("meta");
			viewportNode.name = "viewport";
			viewportNode.content = viewportContent;
			document.head.appendChild(viewportNode);
		}
	}
	window.ajustViewport = ajustViewport;
})();

调用的时候，在页尾调用 ajustViewport(gameWidth,gameHeight) ; 即可。由于这种缩放是直接通过设置viewport，改变设备dpi缩放比率实现的缩放，所以所有的像素位置，包括事件位置都和pc上一模一样，是种很好的缩放方案。