webapp尺寸

一、viewport宽度

起源：PC端的网站要显示在移动端有什么问题？

• 如果把移动端的可是区域设置到（320-768）的话，大部分网站都会因为太窄而显示错乱
• 所以浏览器默认把viewport【这个viewport指的是layout viewport】设置为一个较宽的值980px或者1024px，至少保证PC网站在移动端上可以显示，只是超出部分出行横向滚动。

二、概念

1、css像素

• html页面中单位是px，在pc中往往1 css px=1物理像素
• css像素是相对值，在不同设备中1px对应不同的设备像素；iphone3的分辨率是320*480即1px=1物理像素；iphone4分辨率*960但是屏幕尺寸没变，意味着同一块区域像素多了1倍，即1 css px=2物理像素。

　　所以拿到设计师的640px（以iPhone4的比例做的设计稿）的设计稿，写代码时一切的高度／字号都要是设计稿的1/2。

2、物理像素

• 表示每英寸所拥有的像素数目，数值越高，代表屏幕能够以更高的密度来显示图像

3、分辨率

• 显示器能够显示的像素多少，显示器可以显示的像素越多，画面就越精细，同样的屏幕区域能显示的信息就越多。
• ppi (pixels per inch)：图像分辨率 （在图像中，每英寸所包含的像素数目）
• ppi的运算方式是：PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。
• 以iphone5为例，其ppi=√（1136px² + 640px²）/4 in=326ppi（视网膜Retina屏）
• iPhone 界面尺寸：320×480、640×960、640×1136
  iPad 界面尺寸：1024×768、2048×1536
  （以上单位都是像素，至于分辨率一般网页UI和移动UI基本上都只要 72 ppi）

4、devicePixelRatio

• window.evicePixelRatio=物理像素/css像素。在iphone4中devicePixelRatio=2也就是1 css像素=2个物理像素。
• devicePixelRatio在不同浏览器中存在一些兼容性问题，并不是完全可靠的。

5、布局视口layout viewport

• 移动设备的默认viewport,css布局是以layout viewpot来作为参考系计算的。
• document.documentElement.clientWidth获取
• 该尺寸可动态设置。

6、展示视口visual viewport

• 代表浏览器可视区域的尺寸。当用户放大浏览器时这个尺寸就会变小
• window.innerWidth获取

7、ideal viewport

• 屏幕尺寸 设备屏幕的尺寸 单位是物理像素
• screen.width获取 屏幕尺寸是不变的
• 在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容
• 设置移动端网站一般以这个viewport为准，ideal viewport的宽度等于设备屏幕宽度，使得无论在什么分辨率下，那些针对ideal viewport设计的网站都可以完美的呈现给用户。

三、屏幕适配

为了能在移动端正常显示PC端的页面，把viewport设置为一个较宽的值，这个viewport是layout viewport。

因为layout viewport的宽度大于浏览器可视区域的宽度，所以需要一个viewport来代表浏览器可视区域的大小，这就是visual viewport。

许多网站为移动设备单独设计，所以需要一个能完美适配移动设备的viewport，这个就是ideal viewport。完美适配就是永恒不需要缩放，不需要横向滚动条就能正常查看网站的所有内容。

ideal viewport没有固定尺寸，不同设备拥有不同的ideal viewport。所有的iphone的ideal viewport都是320px，无论屏幕是320还是640,安卓就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备ideal viewport的宽度都为多少，可以到http://viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。

把移动设备上的viewport分为layout viewport  、 visual viewport   和 ideal viewport  三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。让布局视口宽度就是展示视口。

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

参考：

http://www.ituring.com.cn/article/130015

http://www.cnblogs.com/2050/p/3877280.html

A tale of two viewports — part one

A tale of two viewports — part two

Using the viewport meta tag to control layout on mobile browsers