meta viewport
该meta标签的作用是让当前viewport的宽度等于设备的宽度了，没有该标签移动端宽度默认980px
标准用法：
如果你只是想做一个简单的项目，复制粘贴我下面的代码就可以了
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
如果你想严谨一点，左转打开手机版淘宝找到他的meta viewport标签复制就行了。
算了，估计你就也懒得去，我帮你复制好了。
这是京东的：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
这是淘宝的：
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
visual viewport 和 layout viewport
我们把layout viewport想象为一个很大的照片，把visual viewport想象为在一张板子上开了的矩形口子。板子在照片上移动时，透过口子(visual viewport) 可以看到照片(layout viewport)的其中部分。
- layout viewport是页面渲染时所参考的宽高
- visual viewport 是移动端视窗的设备独立像素宽高
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=0.5">
width
width属性被用来控制layout viewport（布局视窗）的宽度,layout viewport（布局视窗）宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width，width=device-width 也就是将layout viewport（布局视窗）的宽度设置为设备屏幕分辨率的宽度。网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备独立像素），layout viewport的宽度＝屏幕分辨率的宽度＝dip 的宽度。
initial-scale
initial-scale用于指定页面的初始缩放比例，initial-scale=1 表示将layout viewport的宽度设置为屏幕分辨率的宽度，initial-scale=1.5 表示将layout viewport的宽度设置为屏幕分辨率宽度的1.5倍。
maximum-scale
maximum-scale用于指定用户能够放大的最大比例，假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的2倍。
minimum-scale
类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。设置为0.5表示用户能够将页面缩小到初始页面的0.5倍，通常情况下，不会定义该属性的值，页面太小将难以阅读。
user-scalable 是否允许用户进行缩放，值为"no"或"yes"
height设置layout viewport的高度，这个属性并不重要，很少使用
二倍图
比如你需要一个30pt*30pt的图标，那么这时你就需要跟美工（美术工程师）要三个文件：
一个是30px*30px的PNG图片，用原名来命名即可，例如sample.png。
一个是60px*60px的PNG图片，这个要用原名@2x来命名，例如sample@2x.png。
一个是90px*90px的PNG图片，这个要用原名@3x来命名，例如sample@3x.png。
这样把这三张图片导入进工程，你会神奇地发现，这三个文件居然会被iOS统一识别为sample.png，用的时候只需要[UIImage imageNamed:@"sample"]就行了。
那么讲一下应用场景。
1x的图标用于1:1的屏幕，非视网膜屏，例如iPhone 3GS、（/20140414DEL/ //早期iPhone 4）非视网膜屏的众多iPad等。
2x的图标用于1:2的屏幕，大部分视网膜屏，机型如（/20140414ADD/ iPhone 4、）iPhone 4S、iPhone 5、iPhone 5s、iPhone 6、iPad with Retina及后续的视网膜屏iPad等。
3x的图标目前应用于1:3的屏幕，即iPhone 6Plus，这个就比较特殊了，因为苹果为了方便开发者，想出来一个简便的实现方案，将22081242分辨率的图像压缩输出在19201080的屏幕上。
像素:英文名叫px
像素是构成图像最基本的点，平时说的像素多少也就是这些点的多少。而分辨率就是构成图像的点的排列方式。比如说一张照片的分辨率16001200，就表示这个照片上一共有16001200=192万个像素，每个横道有1600个像素，每个竖道有1200个像素
分辨率
说手机分辨率是1334×750代表，纵向有1334像素，横向有750像素
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。
一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
