meta name=”viewport” content=”width=device-width, initial-scale=1″的解释

meta name=”viewport” content=”width=device-width,initial-scale=1.0″ 解释<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
content：代表的是属性值 ；
width：代表可视区域宽度，数值可为数字或者关键词device-width；
height：代表可视区域高度，数值可为数字或者关键词device-height；
intial-scale：你表的为首次被显示可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放maximum-scale=1.0, minimum-scale=1.0；可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上；
user-scalable：代表的是是否对页面进行缩放，NO则是禁止对页面缩放。
复杂的说：

移动前端开发之viewport的深入理解

要在移动设备上进行网页重构或者开发，首先得明白viewport这个移动设备参数，只有清楚了viewport的概念及viewport有关meta标签使用方法，就能更好的让网页进行适配或者自动响应不同的终端设备。

一、viewport的概念

简单地讲viewport设置地就是在屏幕上用来显示网页的那一块区域，通俗地讲就是在终端浏览器上显示网页内容框架的他部分区域，但viewport不仅只局限于可视区域大小，可能会比浏览器可视区域还要大，也有可能比浏览器上的可视区域小，但一般情况下viewport都是大于终端上可浏览区域的，由于考虑到移动终端设备的屏幕分辨率比PC电脑终端分辨率都要小，因此为了能正常显示网页上的内容，在移动终端上viewport默认值设置为980px或1024px，也可以自定义设置为其它值，这个可根据终端浏览设备来决定，但viewport值不是默认值，浏览器下端就会出现有横向滚动条，这种情况是由于浏览器可视区域的宽度小于viewport设备的宽度，下面给大家罗列一些常用设备浏览器的默认viewport的宽度，如下图所示：

二、css中的1px并不等于设备的1px

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是在css像素代码中一般都是用px像素作为单位，css代码中的1个像素一般代表的是PC电脑屏幕的1个物理像素，这样就会给大部分人造成一个错觉就是css中像素就是终端设备物理像素，但其实并不是这样的，css中的像素只是一个抽象的单位值，在不同的终端设备上和环境中，css中的1px像素所代表物理像素是不同的。
在PC电脑网页程序设计中，我们也无需为这个太在意，但在移动终端设备上则必须要搞清楚这一点，例如在早期的移动终端设备中，屏幕像素都是比较低的，例如iphone3，分辨率却只有320×480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的，后来随着技术的发展，移动终端屏幕像素密度越来越高，从苹果4版本手机开始，就推出了Retina屏，手机屏幕像素提高了一倍，屏幕像素为640×960，屏幕尺寸却没有变化，这就意味着同样大小的手机屏幕，像素提高了一倍，此时，一个CSS像素就等于屏幕上两个物理像素，其它品牌的手机也是一样的，安卓移动终端屏幕像素密度分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会导致CSS代码中像素的变化，那就是用户对移动终端网页屏幕的缩放，例如将当前网页缩放一倍，这里CSS中的代表的物理像素也会相应的增加，反之就会随之减少。
在如今一些终端浏览器中及PC电脑桌面浏览器中，window系统对象有一个devicePixelRatio属性，官方对它定义的是设备物理像素和设备独立像素的比例， devicePixelRatio = 物理像素 / 独立像素，CSS中的像素可以看做是设备独立像素，通过devicePixelRatio，就可以知道设备上一个css像素代表多少个物理像素，例如Retina屏的iphone上，devicePixelRatio数值为2，代表的意思是就是1个css像素相当于2个物理像素，需要注意的是devicePixelRatio在不同的浏览器中还有兼容性问题，因此我们不能完全依靠这个东西，具体的原因请看下面的讲解。
devicePixelRatio的测试结果：

三、PPK的关于三个viewport的理论

有许多的IT大神对于viewport这个参数有着许多的研究，有兴趣的站长们可以百度上搜索了解一下，本文中有许多的知识点也是摘自于那里，相关研究知识认为移动终端上有三个viewport。
1、移动终端浏览器的作用是必须要使网页在移动终端浏览器上显示正常，即使用不是移动端网站或没有做适配的网站，如果以手机终端屏幕可视区域做为viewport值的话，因为移动设备屏幕宽度很窄，所以PC网页在移动端显示的时候，必然会导致由于屏蔽尺寸太窄使PC端网页乱做一起，严重影响了用户体验，有的人也许会问现在手机屏蔽不是已经挺大的吗？例如768×1024或者1080×1920，这样的分辨率显示PC网站是没有问题的，前面我们也有说过了CSS中的一个像素并不是代表终端屏幕上的一个像素，你的分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio值也越大，这很好理解，由于你的终端分辨率增大了，屏幕尺寸大小并没有太大的变化，因此我们必须要使用CSS中的一个像素代表更多的屏幕物理像素，才可以让1px的东西在屏幕上的大小与在不同屏幕分辨率设备上显示的效果差不多，否则就会因为太小面使网页看不清。
因此在1080×1920这样的分辨率的设备上，一般情况下只需要将宽度设为300多px（视devicePixelRatio的值而定），就可以进宪满屏显示了，如果将移动设备上浏览器可视区域设为viewport的话，有些网站就会因为viewport太窄而显示错乱，因此就要把浏览器的viewport值设定为一个较宽的数值，例如980像素px，这样那些较宽的屏幕就可以正常显示了，把这个浏览器默认的viewport叫做layout viewport。这个layout viewport的宽度可以通过document.documentElement.clientWidth 来获取。
由于有的layout viewport的宽度是大小浏览器可视区域宽度的，因此需要一个viewport值来代表浏览器可视区域大小，把这个viewport叫做visual viewport，visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

现在我们已经设置了两个viewport值了，分别为layout viewport和visual viewport，由于终端序设备的不断发展，这两个值还是不够的，所以我们必须还要设置一个能完美适配移动终端设备的viewport值，完美适配的标准就是用户不需要缩放、拖动横向滚动条就可以正常浏览网页所有内容；
2、网页上的文字是不是能显示正常，例14PX像素大小的文字，不会由于像素高而导致文字无法看清，我们要的效果是这段14PX的文字，不管是在任何终端上都可以显示正常，图片也是一样的，也可以显示正常，我们把这个viewport值称之为ideal viewport，也就是第三个viewport为移动设备的理想viewport。
ideal viewport值并无固定尺寸，不同的终端设备有着不同的ideal viewport值，所有iphone手机的ideal viewport宽度值都是320px，不管手机屏幕尺寸是320还是640，在iphone手机中，css中的320px就代表iphone屏幕的宽度。

安卓移动张端系统就比较复杂了，屏幕尺寸有320px、360px，甚至还有384px等。
移动设备上viewport值分为layout viewport 、 visual viewport 和 ideal viewport这三类，ideal viewport是最适合移动终端设备浏览的viewport值，ideal viewport宽度就是移动设备屏幕宽度，在css中把某一个元素宽度设置为ideal viewport的宽度(单位px)，这个元素就是移动设备屏幕的宽度了，此时屏幕宽度就是100%的效果。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，网页下方出现有横向横向滚动条。
这个meta标签到底有什么作用呢？
meta viewport标签首先是由苹果公司在safari浏览器中引入的，目的就是解决移动终端设备上的viewport问题，后来安卓及各大手机浏览器开发商也都引入该标签，也因此证明了viewport标签的重要性。
在苹果公司规范中，meta标签的viewport有6个属性，如下图所示：

以上meta标签viewport的6个属性可以单独使用，也可以多个一起使用，多个属性一起使用用英文逗号隔开就行。
另外，安卓系统的称动设备还支持target-densitydpi这个私有属性，代表的是当前目标设备的密度等级，作用是决定css中的1px代表多少物理像素。

需要特别说明的是，当target-densitydpi=device-dpi时， css中的1px就会等于物理像素中的1px。
因为这个属性值只有在安卓系统中才能使用，现在安卓也准备放弃这个target-densitydpi属性了，所以我们无需过多了解这个属性了，知道有这个属性就行了。

五、把当前的viewport宽度设置为 ideal viewport 的宽度

想要得到ideal viewport就必须要把默认的layout viewport宽度设置为移动设备屏幕宽度，由于meta viewport中的width能控制layout viewport的宽度，因此我们只要把width设为width-device这个特殊的值就行了，代码如下所示：
<meta name=”viewport” content=”width=device-width”>
下图是在各大移动端浏览器中测试得出和结果：

通过以上我们得知width=device-width，因此所以移动端浏览器能自动将当前的viewport宽度变成ideal viewport的宽度，需要注意的是在iphone和ipad上，不管是竖屏还是横屏，移动终端屏幕的宽度都是竖屏的ideal viewport的宽度。
这种代码的写法虽然看起来简单，哪个都会做，但我们在开发移动端网页的时候，无论你是不是明白viewport是什么意思，我们只需要将以下这段代码加在head标签中就行了，代码如下所示：
<meta name=”viewport” content=”initial-scale=1″>
这段代码能把当前的viewport变为 ideal viewport。
在理论上讲，这段代码的作用只能将当前页面进行自动缩放，意思是当前页面多大就缩放多大，有的人也许就会问为什么还会有width=device-width的效果呢？
其实你想要弄明白这个问题，首先你得明白这代段代码的缩放是相对于什么而进行缩放的，当缩放值为1，也就代表的是没有进行缩放，也达到了ideal viewport的效果，因此结果就是缩放是相对于ideal viewport来进行缩放的，当ideal viewport是进行100%缩放的时候，缩放值就是为1，此时也就得到了ideal viewport吗？通过相关实例证明确实是这样的，下面这张图是各大移动端浏览器设置了<meta name=”viewport” content=”initial-scale=1″>后能不能把当前的viewport宽度变成 ideal viewport的宽度的测试结果。

最后测试结果表明initial-scale=1也可以将viewport宽度变成ideal viewport宽度，但在windows移动设备上的IE浏览器，不管是竖屏还是横屏，都可以将宽度设置为竖屏时ideal viewport的宽度，这种小问题也无伤大雅了。
如果width和initial-scale=1一起出现，而且还出现了冲突，例如
<meta name=”viewport” content=”width=400, initial-scale=1″>
width=400表示把当前viewport的宽度设为400px，initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度，这种情况浏览器执行哪条参数指令呢？
这种情况，浏览器会执行两个数值中最大的那个，例如当width=400，ideal viewport的宽度为320时，取的数值是400，当width=400，ideal viewport的宽度为480时，取的是ideal viewport的宽度。（在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）
，最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置width=device-width，也可以设置initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

六、关于meta viewport的更多知识

1、关于缩放以及initial-scale的默认值

下面来讨论一下缩放的问题，前面已经提到过，缩放是相对于ideal viewport来进行缩放的，缩放数值越大，当前viewport的宽度就会越小，反之亦然，例如iphone中，ideal viewport的宽度是320px，如果我们设置initial-scale=2 ，此时viewport的宽度会变为只有160px了，放大了一倍，原来的1px像素就变成了2px像素了，但要注意虽然1px像素变成了2px像素，但原来的320x并没有变为640px，而且在实际宽度不变的情况下，1px变得跟原来的2px长度一样了，所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此，我们可以得出一个公式：
visual viewport宽度 = ideal viewport宽度 / 当前缩放值
当前缩放值 = ideal viewport宽度 / visual viewport宽度
ps: visual viewport的宽度指的是浏览器可视区域的宽度。
现在大部分浏览器都是符合这个原理的，只有在安卓系统自带浏览器和IE浏览器上可能会有点问题，安卓自带webkit浏览器只有在 initial-scale = 1及没有设置width属性时表现才是正常的，相当于以上这个理论在这个浏览器上没有用的，而IE浏览器则根本不认识这个属性，IE浏览器不管你设置的是什么，initial-scale的属性永远是1。
现在我们再来说下initial-scale默认值问题，当我没有设置这个属性值的时候，它默认值又会是多少呢？显然应该不会是1，因为当initial-scale = 1 时，当前layout viewport宽度会被设为ideal viewport的宽度，但前面说了，各浏览器默认的layout viewport宽度一般都是980、1024、800等等这些，没有一开始就是ideal viewport的宽度，所以initial-scale的默认值肯定不是1。安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale默认值。
根据测试，在iphone和ipad苹果IOS系统上得到一个结论，就是不管是你给layout viewpor设置的宽度是多少，又没指定初始缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，来保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，在浏览器的下方不会出现有横向滚动条。例如在iphone手机上，我们没有设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度 / visual viewport宽度，我们可以得出：

当前缩放值 = 320 / 980

也就是当前的initial-scale默认值应该是 0.33这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。
总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

2、动态改变meta viewport标签

第一种方法，使用document.write动态输出meta viewport标签，例如：

document.write(‘<meta name=”viewport” content=”width=device-width,initial-scale=1″>’)

第二种方法，通过setAttribute来改变

<meta id=”testViewport” name=”viewport” content=”width = 380″>
<script>
var mvp = document.getElementById(‘testViewport’);
mvp.setAttribute(‘content’,’width=480′);
</script>

安卓2.3自带浏览器上的一个bug

<meta name=”viewport” content=”width=device-width”>
<script type=”text/javascript”>
alert(document.documentElement.clientWidth); //弹出600，正常情况应该弹出320
</script>
<meta name=”viewport” content=”width=600″>
<script type=”text/javascript”>
alert(document.documentElement.clientWidth); //弹出320，正常情况应该弹出600
</script>

测试手机ideal viewport宽度为320px，第一次弹出的数值为600，但这个数值应该是第一行meta标签的结果，第二次弹出的值是320，这是第一行meta标签所达到的效果，因此安卓2.3(或许是所有2.x版本中)的自带浏览器中，对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果。

七、结语

以上废话说了蛮多，最后给大家总结一点就是
首先如果不设置meta viewport标签，那么在移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，这里所指的浏览器宽度像素px指的是css中的px，与终端设备屏幕上的像素并不是一样的，这个宽度就相当于100%所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
来得到一个理想的viewport（也就是前面说的ideal viewport）。
为什么需要有理想的viewport呢？比如一个分辨率为320×480的手机理想viewport的宽度是320px，而另一个屏幕尺寸相同但分辨率为640×960的手机的理想viewport宽度也是为320px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。