移动前端开发的viewport总结整理

1.通俗讲移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那块区域，但不是浏览器可视区域。一般来讲，移动设备上的viewport都要大于浏览器的可视区域。移动设备上的浏览器会把默认的viewport设置为980px或1024px，这样会造成浏览器出现横向滚动条。

2.css中的1px不等于设备的1px。分辨率越大，css中1px代表的物理像素就会越多。

3.三个viewpor理论：layout viewport ；visual viewpoint，ideal viewp。

　layout viewport:如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过document.documentElement.clientWidth 来获取。

　visual viewport：浏览器的可视区域的大小，可以铜通过window.innerWidth来获取。

　ideal viewport:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。jquery mobile 框架做出来就是为了使界面适配各种移动设备，在任何移动设备上都不会出现横向滚动条。

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

　移动设备默认的是layout viewport ，它要比屏幕更宽。想要达到ideal viewport效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。
同样：<meta name="viewport" content="initial-scale=1"> 也能实现把当前的viewport变为ideal viewport。但这次windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。

所以完美解决办法是：兼容ie及iphone。

<meta name="viewport" content="width=device-width, initial-scale=1">

5.在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

原文出处：http://www.cnblogs.com/2050/p/3877280.html。