移动端适配之viewport适配

前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧!

首先我们可以获取到当前设备的独立像素(window.screen.width),然后通过适配的像素比(dpr)还原其真实逻辑像素(物理像素),然后在其还原后的设备像素上进行适配.

那么这个viewport适配有什么问题呢?

缺点:

1.这个方法有时候不准确,比如某些时候dpr不是整数时候,比例缩放将出现误差,(比例缩放除以缩放比例)

2.像414独立像素渲染出来是1242的,但实际转换后是1080的,所有算出来不是标准的!

案例代码:

<script>
		//自制行函数
				(function() {
			/*
			 * 375/ scalc=750
			 * 320/scalc=640
			 * 414/scalc=1242
			 * 缩放比例 scalc= 1/2
			 * 缩放比例 scalc= 1/2
			 * 缩放比例 scalc= 1/3
			 * scalc=1/dpr
			 * 
			 *  
			 * 
			 * 
			 * */
//			var curWidth=window.screen.width;
//			var tarWidth=375;
//缩放比例
			var scalc=1/window.devicePixelRatio;
			var meta=document.createElement('meta');
			meta.name="viewport";
			meta.content="initial-scale="+scalc+",minimum-scale="+scalc+",maximum-scale="+scalc+",user-scalable=no"
			//将meta标签插入到head的子元素
			document.head.appendChild(meta);
		})()
		</script>

通过不同的设备比例以及,对于的物理像素关闭得出缩放的scalc=1/dpr,通过这个获取到的动态缩放比例来动态设置meta标签!(比例缩放时候讲过),尽管这样,也算尽量尽可能的去适配!随后继续介绍较为完美的rem布局适配方案!淘宝的布局方案,也算此种方式!不过适配的是dpr2.0的!