你的位置:首页 > 网页设计

[网页设计]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物理像素。

2、物理像素

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

3、分辨率

  • 显示器能够显示的像素多少,显示器可以显示的像素越多,画面就越精细,同样的屏幕区域能显示的信息就越多。

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