一、viewport
html
移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认状况下，移动设备上的viewport都是大于浏览器可视区域的，这是由于移动设备的分辨率相对于PC来讲都比较小，因此为了能在移动设备上正常显示那些为PC浏览器设计的网站，移动设备上的浏览器都会把本身默认的viewport设为980px或1024px（也多是其它值，由设备自己决定），但后果是浏览器出现横向滚动条，由于浏览器可视区域的宽度比默认的viewport的宽度小。浏览器
二、3个viewportiphone
（1）layout viewportide
若是把移动设备上浏览器的可视区域设为viewport的话，某些网站会由于viewport太窄而显示错乱，因此这些浏览器就默认会把viewport设为一个较宽的值，好比980px，使得即便是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫作 layout viewport。layout viewport的宽度能够经过 document.documentElement.clientWidth来获取。网站
（2）visual viewportidea
layout viewport的宽度是大于浏览器可视区域的宽度的，因此还须要一个viewport来表明浏览器可视区域的大小，这个viewport叫作 visual viewport。visual viewport的宽度能够经过 document.documentElement.innerWidth来获取。
spa
（3）ideal viewportscala
ideal viewport是一个能完美适配移动设备的viewport。首先，不须要缩放和横向滚动条就能正常查看网站的全部内容；其次，显示的文字、图片大小合适，如14px的文字不会由于在一个高密度像素的屏幕里显示得过小而没法看清，不管是在何种密度屏幕，何种分辨率下，显示出来的大小都差很少。这个viewport叫作 ideal viewport。设计
ideal viewport并无一个固定的尺寸，不一样的设备有不一样的ideal viewport。例如，全部的iphone的ideal viewport宽度都是320px，不管它的屏幕宽度是320仍是640。code
ideal viewport 的意义在于，不管在何种分辨率的屏幕下，针对ideal viewport 而设计的网站，不须要缩放和横向滚动条均可以完美地呈现给用户。
三、利用meta标签对viewport进行控制
移动设备默认的viewport是layout viewport，，但在进行移动设备网站的开发时，须要的是ideal viewport。要获得ideal viewport，须要用到meta标签。
head标签中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
该meta标签的做用是让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放。固然maximum-scale=1.0, user-scalable=0不是必需的，是否容许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。
meta viewport 的6个属性：
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，能够带小数 |
| minimum-scale | 容许用户的最小缩放值，为一个数字，能够带小数 |
| maximum-scale | 容许用户的最大缩放值，为一个数字，能够带小数 |
| height | 设置layout viewport 的高度，这个属性并不重要，不多使用 |
| user-scalable | 是否容许用户进行缩放，值为"no"或"yes", no 表明不容许，yes表明容许 |
width能控制layout viewport的宽度，若是不指定该属性，layout viewport将默认为980px或1024px（也多是其它值，由设备自己决定），若是把layout viewport的宽度设置为移动设备的宽度，那么layout viewport将成为ideal viewport。
其实，要把当前的viewport宽度设为ideal viewport的宽度，既能够设置width=device-width，也能够设置initial-scale=1，但有一个小缺陷，就是width=device-width会致使iphone、ipad横竖屏不分，initial-scale=1会致使IE横竖屏不分，都以竖屏的ideal viewport宽度为准。因此，最完美的写法二者都写上去， initial-scale=1 解决 iphone、ipad的缺陷，width=device-width解决IE的缺陷。
viewport设置移动端自适应的方法：
<meta name="viewport" content="width=device-width, initial-scale=1">