ViewPort 移动开发前端得劲深入理解

1.ViewPort是什么

一般来说，移动上的viewPort就是设备屏幕上能用来显示我们网页的那一块区域，但是，不局限于浏览器的可视区域的大小，可以比浏览器的可视区域大，也可以比浏览器的可视区域小，一般默认情况下，移动设备上的viewport都是大于浏览器的可视区域的。


ul{list-style-type:none;margin:0;padding:0; float:left;clear:right; width:100%;}
li {display:inline;float:left ;width:60px; height:60px; background:#757575;border: solid 1px #ffffff;}
p{ text-align:center;color:#ffffff;}

  • iphone
  • ipad
  • AndroidSamsung
  • AndroidHTC
  • Chrome
  • operaPresto
  • BlackBerry
  • IE
  • 980
  • 980
  • 980
  • 980
  • 980
  • 980
  • 1024
  • 1024

2.Css中的1px与移动设备中的1px比较

因为移动设备的分辨率不同，在桌面的浏览器Css中1px不等于设备的1px。早期，由于屏幕分辨率较低，1个Css像素有等于一个物理像素的，但是随着移动屏幕的像素密度越来越高，这导致了不同的设备对应的物理屏幕像素也不样。
   用户缩放会用心到Css中所代表的物理像素，如当放大一倍时，那么Css中1px代表的物理像素也会相应的增加一倍。反之，缩小也一样。
   在移动端以及桌面浏览器中，window对象有一个devicepixeratio属性，定义为设备物理像素与设备独立像素的比例，即 devicepixeRatio=物理像素/独立像素。

3.关于PPK的三个viewport的理论

关于PPK的三篇对viewport的地址:
1.http://www.quirksmode.org/mobile/viewports.html  2.http://www.quirksmode.org/mobile/viewports2.html 3.http://www.quirksmode.org/mobile/metaviewport/
由于viewport的可视区域有限，不会因为手机分辨率而增大，屏幕大小已经限制。所以为了让为桌面设计的网站在移动端浏览，所以浏览器默认将viewport设置为一个比较宽的值：980.这个由浏览器默认这只的viewport在ppk中称为：layout Viewport.  
   该值可以通过：document.documentElement.clientWidth获取。
   然而，layoutViewport的宽度是大于浏览器的宽度的。所以我们需要一个viewport来代表可视区域。（即一个为页面的实际大小，一个为可视大小）。而这个viewport则被称为visualViewPort.
   该值可以通过window.innerWidth获取。
   最后，还将为移动设备进行单独设计，可以完美适配于移动设备的Viewport(可以不需要用户进行缩放和横向滚动条就能正常查看网站的所有内容，文字字体大小无论在哪种分辨率下都是一样大小，图片等同上)。这个viewport就是IdealViewport  所有iphone的idealViewport宽度都是32opx，无论它的屏幕宽度是320还是640.也就是说，css中的320px就代表iphone屏幕的宽度。
   android的由于设备不一致，所以较为复杂，可以到http://viewportsizes.com上查看。

4.利用meta标签对viewport进行控制

移动设备默认的viewport是layoutView，在实际开发过程中，我需要的是idealViewport。这就需要meta标签。   
    如：<meta name="viewport" content="width=device-width,initial-scale=1.0,maxnimum-scale=1.0,user-scalable=0">
    该标签的作用是让当前的viewport的宽度等于设备的刻度，且不允许用户手动缩放（这个看网站的要求）。
    metaview 最先是苹果公司在safari中引入，后来安卓可以兼容。具体的属性有：
    1.width:设置layoutviewport的宽度，为整数，或者字符串device-width
    2.initial-scale:设置初始的缩放值，为一个数字，可以带小数
    3.minimum-scale：用户允许的最小缩放值，为一个数字，可以带小数
    4.maximun-scale:允许用户的最大缩放值，为一个数字，可以带小数。
    5.height：设置layoutviewport的高度，这个高度不常用。
    6.user-scalable:允许用户进行缩放 值为yes/no
    7.(android特有)target-densitydpi： 值可以为一个数值或者high-肚皮，medium-dpi,low-dpi,device-dpi.当等于device-dpi时，css的像素与物理的像素相等。（android决定废用）
    注意：<meta name="viewport" content="windth=dvice-width">与<mate name="viewport" content="initial-scle=1">的效果都一样的，都是可以让当前的viewport宽度等于idealViewport  原因是缩放等于1，而缩放时基于idealViewport缩放的。所以是对ideal viewport进行100%缩放，就是等价于ideal viewport.综上，因此当width有具体值和initial-scle=1同时设置时，就会有冲突，默认去二者最大那个值。

### 5 关于缩放以及initial-scale的默认值
ideal viewport与缩放是相对的，如当缩放为1时，那么其viewport与ideal viewport等价。当缩放为2时，则viewport就缩小1倍。如之前为320，放大1倍，就是160。相当于实际宽度不变的情况下，1px变得与原来的2px的长度一样了。所以之前要320才能填满的宽度，现在160就可以填满了。
因此：visual viewport宽度（当前可视区域）＝ideal viewport 宽度/当前缩放值。
注意：安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是1。

6.动态改变meta viewPort标签

1) 第一种方法
可以通过document.write来动态输出输出viewport
    如： document.write('<mata name ="viewport" content ="width=device-eidth,initial-scale=1">')
2 第二种方法
可以通过setattribute来改变
    如：
<meta id="testViewport" name="viewport" content="width = 380">
<script>
            var mvp = document.getElementById('testViewport');
            mvp.setAttribute('content','width=480');
</script>·