网页源代码中有时候会遇到这样的一段代码：
<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放具体的viewport解释看下面===========>
原文：http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html
viewport 语法介绍：
| 01 | <!-- html document --> |
| 02 | <meta name="viewport" |
| 03 | content=" |
| 04 | height = [pixel_value | device-height] , |
| 05 | width = [pixel_value | device-width ] , |
| 06 | initial-scale = float_value , |
| 07 | minimum-scale = float_value , |
| 08 | maximum-scale = float_value , |
| 09 | user-scalable = [yes | no] , |
| 10 | target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] |
| 11 | " |
| 12 | /> |
width
控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height
和 width 相对应，指定高度。
target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
下面是 target-densitydpi 属性的 取值范围
- device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
- high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
- medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
- low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
- <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
| 1 | <!-- html document --> |
| 2 | <meta name="viewport" content="target-densitydpi=device-dpi" /> |
| 3 | <meta name="viewport" content="target-densitydpi=high-dpi" /> |
| 4 | <meta name="viewport" content="target-densitydpi=medium-dpi" /> |
| 5 | <meta name="viewport" content="target-densitydpi=low-dpi" /> |
| 6 | <meta name="viewport" content="target-densitydpi=200" /> |
为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。
initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
所有的缩放值都必须在0.01–10的范围之内。
例：
(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,user-scalable=no" />
(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
以上内容转自http://blog.csdn.net/joyhen/article/details/43266927
以下内容转自点击打开链接
论meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用
一、先明白几个概念
phys.width:
device-width:
一般我们所指的宽度width即为phys.width，而device-width又称为css-width。
其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取。如iphone6的phys.width为750px，而css-width为375px。
二、
明白一个浏览器默认行为。
试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如：safari iphone：980px;
opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条，而且字迹明显变小的原因。
三、讲解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1
meta标签中，width有两个含义，第一、width为phys.width，第二，width也为虚拟窗口的width。这样就会有两个结果：
第一、此时的iPhone6的phys.width也变成了css-width即375px，我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。
第二、如你设计的是375px的手机端页面，此时的虚拟窗口的宽度也为375px，再装进phys.width为375px的手机，当然如设计稿一样的效果，不会缩放，也不会出现横向滚动条。
四、对响应式布局，媒体查询的影响
@media only screen and (min-width: 350px) and (max-width: 480px){.....................}
如没有meta标签，此时的width当然即为phys.width，iPhone6就不会执行上边的括号里边的代码，但是有了meta标签以后呢，width变成了css-width，即为375px,，所以是会执行代码的。
五、论meta标签的影响
从上边可以看出，有了meta标签以后，原本的iPhone6，即像素比为2的手机，可以按照css-width相同的像素比为1的手机一样正常显示，像素比更高的手机也能正常显示。当然现在andriod的2K屏在meta标签的帮助下也能正常显示。即对于开发者来说，已经可以不管手机的像素比，只需按照css像素编写代码即可。