不是像素的像素不是像素

不是像素的像素不是像素

昨天 John Gruber 的文章谈到了 在即将到来的iPhone中的增强像素密度(the upped pixel density 替代480x320的 960x640分辨率),以及为什么 Apple 这么做。他也很想知道这接下来对web开发者的影响会是什么。

现在我正巧在深入研究在移动话机设备上面，跨浏览器的宽度与高度问题，所以可以较合理的确定在99%的情形中，这些改变根本不会对web开发者产生影响。

剩下的1%很棘手，但我希望 Apple 可以面对这个问题，插入一个中间的像素层。（后来John 指出来 这种像素层在Android中已经存在了。）

一个开始前的警告：我总是忽略正式的屏幕尺寸，因为他们对web开发者不重要，而且我也不准备讨论显示的输入与输出，像素密度，以及其它复杂的概念。因此这儿有可能会用错术语，在此预先说一声抱歉。

web 开发者需要什么

可是，我不知道web开发者对什么感兴趣。他们需要CSS像素。也就是说，CSS中使用的“像素”是这么声明的width:300px 或 font-size:14px。

这些像素与设备的实际像素密度没有丝毫关系，甚至是和传说中的即将到来的过渡层也没有关系。他们本质上是专门为我们web开发人员创建的一个抽象结构。

当我们考虑到缩放的时候最容易解释这一点。如果用户放大，具有width:300px的元素将占据越来越多的屏幕，这样以设备（物理）像素来衡量就会变得越来越宽。但是，以CSS像素来算，宽度仍维持在300px，缩放效果是通过按照需要扩展CSS像素来实现的。

当缩放因子恰好是100%，一个CSS像素等于一个设备像素（虽然即将到来的中间层将会在这里替代掉设备像素）。下面的图像描述了这一点。这里没有更多的东西要看，因为一个CSS像素恰好与一个设备像素重叠。



(我或许应该提示你在web开发中 “zoom 100%” 没有什么意义。缩放水平对我们并不重要；我们需要知道的是现在有多少CSS像素在与屏幕适配。)

下面的两幅图像阐明了用户缩放的时候发生了什么。第一幅显示出用户放大的时候，设备像素 (深蓝色背景) 和CSS像素 (半透明的前景)。CSS像素变得小了；一个设备像素覆盖了若干个CSS像素。第二幅图像显示出用户缩小的时候，设备和CSS像素情况。现在一个CSS像素覆盖了数个设备像素。





这样我们的元素宽度width:300px总是恰好等于300CSS像素宽，而有多少设备像素与当前的缩放因子有关。

(你可以通过screen.width除以window.innerWidth计算出这个因子——在iPhone设备上。浏览器不兼容的问题在这里盛行；期待在不远的将来有一个完整的报告。此外，作为一个web开发者，你不会对缩放因子感兴趣，而会对屏幕上适合有多少像素（设备的或CSS的）感兴趣。)

这个系统不会变化。要不然，所有的针对iPhone优化的网站就会忽然有一些需要优化的地方，而这正是Apple努力以一切代价所避免的。

因此，一个最大化的网站仍然显示为980CSS像素，而它等于多少设备像素对我们并不重要。

棘手的问题(The tricky bits)

然而，这里有两个棘手的问题： device-width媒体查询(media query)和<meta name="viewport" width="device-width">标签。它俩都在设备像素上起作用，而不是CSS像素， 因为反映了网页页面的上下文环境，而不是它们内部CSS工作环境。

媒体查询(The media query)

device-width媒体查询以设备像素测量设备的宽度。width媒体查询以CSS像素测量页面宽度的总和，在iPhone上至少980px，具体原因且听后面分解。



device-width媒体查询以下面的方式工作：

01	div.sidebar {

02	width : 300px ;

03

}

04

05	@media all and (max-device- width : 320px ) {

06	// styles assigned when device width is smaller than 320px ;

07	div.sidebar {

08	width : 100px ;

09

}

10

11

}

如今，侧边栏宽300CSS像素，除非当设备的宽度为320设备像素或者更小，这种情况下它会变为100CSS像素宽了（你还能更得上不？这个很复杂。）

顺便说一句，理论上你可以使用厘米或者英寸(@mediaall and (max-device-width:9cm))单位的媒体查询来查询设备屏幕。不幸的是，它好像完全不支持，即使在iPhone上。问题是像英寸等物理单元通常要转换为(CSS)像素；因此迄今为止我所测试的所有浏览器上width:1 in等于 96像素，所以这些媒体查询是不可靠的。

<meta>标签(The<meta>tag)

一般来说，<meta name="viewport" width="device-width">是相当有用的。这个标签起初是苹果专有的，但是同时也被很多手机浏览器所支持，事实上它使布局窗口与设备适应的十分好。

如今布局窗口是什么呢？它是一块区域，浏览器使用宽度的百分比来计算元素的维数，例如 div.sidebar{width:20%}。它实际上比iPhone的980px, Opera的850px，Android的800px等设备屏幕还要大一点。



如果你添加了<meta name="viewport" width="device-width">，那么这个布局窗口的宽度要受设备像素的设备宽度的限制; 在iPhone下,一般为320。

这关系到你的页面是否足够小来与这个屏幕相适应。这个页面在没有任何CSS宽度设置和没有<meta>标签的情况下，它会铺满整个布局窗口全部可用的宽度。



这可能并不是你所想要的。你想要的是文本在屏幕上适应的很好，这个当之无愧的要靠<meta name="viewport" width="device-width">了。当你将它添加到页面后，这个布局窗口会缩小（iPhone在这种情况下缩小到320px）了，然后文本就与屏幕相适应了。

苹果的改变

现在，苹果的分辨率的改变对device-width媒体查询以及<meta>标签有什么样的影响？当然我也不确定，但是我期望对于web开发者没有任何改变。

<meta>标签

<meta>标签最容易解释了。苹果有意发明它主要是为了允许人们能够让他们的内容与iPhone屏幕相适应，然后开发人员推出了它。也就是说它不能改变设备的宽度，因为它只是读出类容而已。

事实上，Nexus One已经开发了一条新道路为Apple指明追随之路。它官方的屏幕宽度为480px(在portrait模式下)，但是当你使用<meta>标签时，它只会使用屏幕的2/3宽度即320px。

如果我理解得正确,这就是有关John Gruber所说的有关Nexus’s显示、它缺少的子像素和减少的1/3的像素的东西。这正符合了Nexus中有关<Meta>标签的解释。

所以，google已经插入了一层叫做DIPS(设备无关像素)的层。这个层是官方声明的，是将屏幕尺寸和Css像素报告给为Web开发人员。

我期望新的Iphone能复制Nexus的这个把戏，当使用<Meta>时，只将屏幕尺寸报告为320像素(换句话所，正常尺寸的一半)。报一半而不是三分之二的目的是由于new Iphone的屏幕像素密度比Nexus(或其它设备)更高。

媒体查询

提供device-width的语句来解决这方面的问题。Nexus的屏幕宽度是480像素，实际上，320像素其实更为恰当。我们必须要Apple是怎么做的。

最基本的问题是DIPS是否能在媒体查询使用，总的来说这个功能是我们非常需要的。通常的屏幕尺寸为web开发人员并不重要，我们想要知道的只是我们能在屏幕上显示多少内容。DIPS貌似看起来非常适合处理这个问题。

可惜的是Nexus并没有提供这个功能，到目前为止媒体查询能使用的divice-width只能使用480像素，而不是320像素。但Apple也许能为web开发人员解决这个问题

因此对于普通的网站来说，什么情况使用<Meta>标签已经十分清楚了。但对媒体查询还不是十分。

继续收看.

本文地址：http://www.oschina.net/translate/a-pixel-is-not-a-pixel

原文地址：http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们