1，viewport
viewport,是移动端特有。这是一个虚拟的区域，承载网页的。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这是因为移动设备的分辨率相对于PC来说都比较小，所以为了能在移动设备上正常显示为PC浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px（也可能是其它值），为了避免滚动条的出现浏览器可视区域的宽度比默认的viewport的宽度小。
2，利用meta标签对viewport进行控制
如果任何设置都没有，默认走的就是viewport的默认设置去设置新的viewport设置,达到适配要求。
<meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置
viewport的功能：
- width 可以设置宽度 (device-width 当前设备的宽度)
- height 可以设置高度
- initial-scale 可以设置默认的缩放比例
- user-scalable 可以设置是否允许用户自行缩放
- maximum-scale 可以设置最大缩放比例
- minimum-scale 可以设置最小缩放比例
在<meta name="viewport" content="" > content="" 使用以上参数
- width=device-width 宽度一致比例是1.0
- initial-scale=1.0 宽度一致比例是1.0
- 3. user-scalable=no 不允许用户自行缩放 （yes，no 或者1,0）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">3，layout viewport，visual viewport和ideal viewport
- layout viewport
layout viewport（布局视口）移动设备上浏览器的可视区域为viewport的话，页面因为viewport太窄而显示错乱，所以这些浏览器就默认会把viewport设为一个较宽的值，即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。
- visual viewport
layout viewport（视觉视口）的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小，这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。
- ideal viewport
ideal viewport（理想视口）是一个能完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。这个viewport叫做 ideal viewport。
ideal viewport并没有一个固定的尺寸，不同的设备有不同的ideal viewport。例如，所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，针对ideal viewport 而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。
viewport设置移动端自适应的方法，建议使用第二个：
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">