定宽320 缩放适配手机屏幕

第一种 根据viewport设置maximum-scale缩放页面

天猫的web app的首页就是采用这种方式去做的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

	(function(){
		var doc = document,
			meta = doc.createElement('meta');
		meta.name = 'viewport';
		meta.content = 'width=320,maximum-scale='+document.documentElement.clientWidth/320+',user-scalable=no';
		doc.getElementsByTagName('head')[0].appendChild(meta);
	})();

　　

 

第二种 添加个div，在div里布局缩放div。

第一步 body里放一个div#LM-wall320居中对齐，从这div里布局页面。

#LM-wall320{margin:0 auto;position: relative;width: 320px;height: 100%;}

　　

	<div id="LM-wall320">
		...
	</div>

 当页面的宽度大于320时会出现这样：

 

 

第二步 根据不同手机页面的宽度依据顶宽320计算 从页面左上角进行缩放

head里插入这段js，这种适配可能出现的问题就是当页面被放大很多倍的时候，图片可能会模糊。

			(function(){
			    var doc = document,
			        style=doc.createElement('style'),
			        Timmer = null;
			    style.innerHTML = setStyle();
			    doc.getElementsByTagName('head')[0].appendChild(style);
			 
			    /*屏幕翻转*/
			    window.addEventListener(window['onorientationchange'] ? 'orientationchange' : 'resize', function(){
			        clearTimeout(Timmer);
			        Timmer = setTimeout(function(){
			            style.innerHTML = setStyle();
			        },200);
			 
			    }, false);
			 
			    /*生成样式*/
			    function setStyle(){
			        var w = doc.documentElement.clientWidth;
			        return '#LM-wall320{width: 320px;-webkit-transform:scale('+w/320+');-webkit-transform-origin: left top;}';
			    }
			 
			})();