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分辨率640*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
如果觉得本文对您有帮助~可以
微信支持一下:![微信打赏](http://files.cnblogs.com/files/starof/starof_wx.bmp)