移动设备上的viewport

像素是网页布局的基础。一个像素就是计算机屏幕能显示一种特定颜色的最小区域。

有两种像素:
设备像素:设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。
css像素:为web开发者创造的,在css和javascript中使用的一个抽象的层。

css像素相当于多少个设备像素取决于屏幕的特性(是否是高密度)和用户的缩放。
用户放大得越大,一个css像素覆盖的设计像素就越多。
如果用户缩小到足够的程度,一个css像素会变得明显比一个设备像素小。

ppk把移动设备上的viewport分为:

layout viewport 布局视口
visual viewport 视觉视口
ideal viewport 理想视口

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

移动设备默认的viewport是layout viewport。
在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。


要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。
缩放是相对于 ideal viewport来进行缩放的,当对ideal viewport进行100%的缩放,也就是缩放值为1的时候,不就得到了 ideal viewport吗?


也可以把当前的的viewport变为 ideal viewport。

要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病:


配套网站:
http://www.quirksmode.org/blog/archives/the_mobile_web_handbook/

发布者

admin

行于途中~

发表评论

电子邮件地址不会被公开。 必填项已用*标注