viewpoint适配

适配的作用

将所有设备的布局视口的宽度调整为设计图的宽度；

viewport适配的原理

在viewport适配方案中，每一个元素的不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的。

viewport适配的优缺点

优点：所量即所得；
缺点：没有完美视口；

viewport适配代码解析

html代码

<!-- viewport适配时，页面中先预留viewport的meta标签-->
<!-- 并保留理想视口设置：因为理想视口的clientWidth等于设备尺寸-->
<meta name="viewport" content="width=device-width">

js代码

(function(){
	//创建一个变量，用来设置设计图的宽度尺寸
	var targetW = 750;
	//	获取页面中预先创建的viewport的meta标签
		var meta = document.querySelector("meta[name='viewport']");
	//创建一个变量用来接收，设备尺寸和设计图尺寸的比值；
	var scale = document.documentElement.clientWidth/targetW;
	//	设置viewport的meta标签，
	//	这里的理想视口（width=device-width）跟initial-scale有冲突，必须去掉；
	meta.content='initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scable=no';
})()