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

有两种像素：
设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
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标签出场了。

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

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

<meta name="viewport" content="initial-scale=1">

也可以把当前的的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的毛病：

<meta name="viewport" content="width=device-width, initial-scale=1">

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

© admin for 可乐吧, 2016. | Permalink | No comment | Add to del.icio.us
Post tags: viewport, 布局视口, 理想视口, 视觉视口

您可能也喜欢：

jQuery移动版发布：支持iOS，黑莓和Android平台

使用 Chrome 开发者工具的设备模式来开发响应式 Web 应用

删除textarea的移动版Safari（iPhone）的阴影

移动端web页面模板

无觅

Feed enhanced by Better Feed from Ozh