移动端页面大小

浏览数：46 / 时间：2015年06月11日

手机端的虚拟viewport

为了能让以前为pc缩写的页面在手机上也能全部显示，手机做了一个虚拟的viewport, iphone的viewport宽是980px;也就是说iPhone3的水平像素是320px, 然后它虚拟了一个980px的viewport,这个viewport就像pc屏幕一样渲染页面(pc上很多页面内容宽度都是960 980这样的数值)，然后又缩小到实际屏幕的320px里，这样原本为pc写的页面就可以在手机上显示了。

但当遇到本来就是为移动端写的窄页面的时候（如320px）,就会出问题，因为它还是会虚拟一个980px的viewport去显示，这时候页面内容只占到viewport的1/3，然后980px的viewport再缩小到手机的实际屏幕上，于是用户只能手里拿着320px宽的手机，看着页面上320/3=106px的内容。同理，ipad会虚拟一个1024px的viewport去显示页面。

修改虚拟viewport

理想的情况是原本的pc页面使用虚拟viewport获得良好的显示，而特意为手机写的窄页面不用虚拟viewport，或者说让虚拟viewport与手机屏幕实际宽度一样。设置viewport的方法是在页面里添加一句meta

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

这句话让虚拟viewport的宽改为320px

<meta name="viewport" content="width=device-width">

让viewport等于设备宽度。

devicePixelRatio

然后iphone4 4s 以及之后的视网膜屏幕出来了，对于没有用meta修改viewport的网页（原本的pc页面），手机会用980px的虚拟viewport去显示页面，再压缩到设备宽度（640px）。而对于设置了的页面会以640px的viewport去显示吗，不会！它仍会以320px的viewport去显示！这是因为如果用宽度640px的viewport去显示页面，之前那些专为iPhone3gs写的320px的窄页面，在屏幕上就只能占用一半的屏幕空间。因此对于这种页面，会以320px的viewport显示页面，再拉大到640px宽的屏幕上，用2个设备像素，显示一个css像素，这个2便是devicePixelRatio——设备像素比例。window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips, 至于这个dips是个什么玩意，其实我没搞清楚，好像就是那个320px吧。。320这个数字是约定俗称的，主要因为当初iPhone3gs的屏幕宽就是320px。这个数字在ipad上是1024px。