1.meta 设置
因为这样设置了，网页宽度才和 设备宽度相同,才可以拿这个标准去限定范围
浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取,layout viewport 的宽度是大于浏览器可视区域的宽度的,比如980px;
visual viewport ,浏览器可视区域的大小 , 可以通过window.innerWidth 来获取;
ideal viewport，也就是第三个viewport——移动设备的理想viewport;
scale = ideal viewport / visual viewport = 1/dpr ;
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips。
dips:device-independent pixels
设备独立像素，就是独立于设备之外的像素，也就是css像素。
查看更多 移动前端开发之viewport的深入理解
移动端开发中，关于适配问题的一点总结(一)
2. js 设置
;(function () {
var change ='orientationchange' in window ?'orientationchange' :'resize';
function calculate() {
var deviceWidth =document.documentElement.clientWidth;
if (deviceWidth <241) {
deviceWidth =240;
}else if(deviceWidth <320){
deviceWidth =320;
}else if (deviceWidth >750) {
deviceWidth =750;
}
document.documentElement.style.fontSize =deviceWidth /7.5 +'px';
};
window.addEventListener('resize',calculate,false);
calculate();
})();
2.1 js 细节
(a) (function () {})();
;(function () {}());
立即执行函数,建立私有作用域，从而限制向全局作用域中添加过多的变量和函数
(b) var change ='orientationchange' in window ?'orientationchange' :'resize';
看移动端是否支持orientationchange ，否则监听 rezise 事件。
orientationchange：设备旋转的时候，会触发这个事件
resize:监听窗口变化。
(c) iphone5 屏幕分辨率 宽是 320px, iphone6，7，8 屏幕分辨率 宽是 375px；
(d) rem 是一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素；
如果 , 此时，1rem = 37.5px;
document.documentElement.style.fontSize =deviceWidth /7.5 +'px';
如果 设备宽是 750px，html 的 font-size 则为 100px;
1rem = 100px; 1px = 1/100 rem; 5px = 5/100rem;
也就是 7.5=设计稿尺寸/100；
css元素尺寸=设计稿元素尺寸/100；
一般情况下设计师给的PSD尺寸是750px,所以采用7.5；如果是640，采用6.4；
window.addEventListener(change,calculate,false); // 设备旋转时触发；
calculate(); // 刷新时触发
3.img图片和背景图片
虽然以上判断条件大概包含所有机型，但有些设备视口还是比较窄的；若是需要全屏的图片，width设置成100%，而不是给他固定值。
4. css元素设置
.carbox{
width:6.5rem; /*设计图上元素宽为650px,除以100；*/
margin:0 auto;
padding:0.1rem 0 0 0.27rem;
}
关于移动端字体设置
移动端安卓和IOS 默认中文字体看起来是差不多的，而针对英文和数字的字体区别比较大；
而 Helvetica 两个系统都支持，可以这样设置
body{font-family:Helvetica;}