关于像素的是是非非

注:这是一篇两年前的文章,现在看来依然能给大家带来不少启发,作者做预期的方案已经开始广泛实施。文中有些地方翻译的有失准确,见谅。

我现在在研究扩浏览器手机设备的宽高方面搞的我焦头烂额,但是我可以声明这些硬件的变化,99%的和网页开发没有任何关系。

但是剩下的这1%就变得更棘手了,我希望苹果能通过增加一个中间像素层来解决这个问题。(后面John pointed out 指出这个中间层在 Android 系统下早就存在了。)

在我们开始之前我必须做一个说明:因为这些东西对网页开发人员并不是那么重要,因此我大多数情况会忽略掉正式的屏幕尺寸,同时我也没有真正的去研究关于显示、像素密度和其它负责的理念。因此我可能会使用了错误的专业术语,对此先道歉。

网页开发工程师需要啥?

我知道网页开发工程师所关心的,他们需要像素(pixels).也就是说,他们需要“pixels”让他们可以在css声明中使用 如 width: 300px or font-size: 14px.

这些像素值和实际的设备像素密度没有一点关系,甚至和传闻中的中间层也没有任何关系。对网页设计是来说,它们是一个基本的抽象的结构。

如果我们通过缩放来解析这个东西,可能会更容易理解。如果用户放大,一个有 width:300px 的元素将会在屏幕中越来越大。如果我们用设备的(物理的)像素来测量的话,它也会变的越来越大,根据需要通过放大的作用我们可以通过扩展css 像素的大小。

当缩放比例刚好是100%的时候,一个css 像素等于1个设备像素(因此传闻中的中间层的像素值将和替代设备像素值)。下面的图片描述了这种情况,我们看不到多出来的东西,因为css的一个像素刚好覆盖了一个设备像素。


(我必须提醒你的是,放大到100%在web开发中的意义并没有意义。放大级别对我们来说不重要,我们需要的仅仅是我们当前的显示器多少像素最合适。)

下面的两幅图谱阿布描述了用户使用放大功能时的情形。第一幅图像表现当用户缩小时,设备的像素点(深蓝色背景)和CSS像素(半透明的前景)。CSS中定义的像素变的更小,一个设备像素包含多个CSS像素。第二幅图像展示了当用户放大的时候,设备像素和css像素之间的关系。现在一个CSS像素覆盖在多个设备像素上面。

因此,我们用CSS定义的一个宽度为300像素的元素它的宽度任何时候都等于300像素,一个像素等于多少设备像素值取决于我们放大的程度。

(你可以通过使用 screen.width 除以 window.innerWidth 得出这个系数。 目前浏览器的不兼容还是挺普遍的;期待在不久的将来有个相对全面的报告。另外,作为网页开发人员你也不会关心放大系数,而仅仅关心多少像素(设备的或者CSS的)才能适应设备屏幕)。

这套系统并没有改变,否则,所有针对iPhone 优化过的站点将立刻变成没有优化过的,这也是苹果要不惜一切代价避免的。

因此,一个即使是放大到最大程度的网站依然显示980 CSS 像素的原因,我们也不会关注有多少设备的像素和它刚好合适,这对我们并不重要

最棘手的问题

这里有两个棘手的问题:device-width 的媒体查询技术 和 <meta name=”viewport” width=”device-width” >标签。这两个都是基于设备 像素的,而不是 CSS 像素,因为他们报告的是页面的内容,而不是CSS生效的内容。

媒体介质查询

device-width 媒体查询测量的设备宽度使用的是设备本身的像素值。width 的媒体查询技术测量的是页面中CSS定义的页面像素值,在iPhone 上面,这个值最少是980px像素,这个我将在后面给大家解释。

device-width 媒体查询技术的工作流程是下面的样子:


div.sidebar {
width: 300px;
}

@media all and (max-device-width: 320px) {
// styles assigned when device width is smaller than 320px;
div.sidebar {
width: 100px;
}

}

现在边栏(siderbar)的宽度是css定义的300像素,除非设备的宽度等于或小于320像素,在这种情况下它才能变成100 CSS像素宽度。(如果你继续看下去,这个将变得很复杂。)

顺便提一下,从理论上来说你可以通过厘米或者英尺来应用媒体查询技术(@media all and (max-device-width: 9cm)。但是不幸的是好像并不被完全的支持,甚至是iPhone 设备。原因是物理单位类似于英尺一般会被转换成(css)像素,我在所有浏览器上测试,绝大多数情况 width:1in 等于96像素。因此这些媒体查询并不可靠。

<tag>标签

通常情况下,<meta name=”viewport” width=”device-width”>更有用。这个属性,最初是苹果设备的专用属性,但是现在被越来越多的浏览器所支持,使视窗布局和设备完全匹配。

那么什么是视窗布局呢?这是一个区域(使用CSS像素),浏览器通过使用百分比的方式计算元素的尺寸,比如 div.siderbaer{width:20%}.一般情况下在iPhone设备上会比设备的屏幕980像素大一些,Opera 850像素,Android 800 像素,等。


如果你增加了 <a name=”viewport” width=”device-width”>,视窗的布局将会被限制在设备像素宽度内;在iPhone 设备下是320像素。

如果你的页面足够窄来适应屏幕。将页面CSS中的 width 声明全部去掉和不使用 <meta> 标签。这样就能将内容延伸到适应整个视窗宽度的页面。

这可能并不是你要的结果。你期望文本能完美的适应屏幕,那这就是 <meta name=”viewport” width=”device-width”> 了。当你把它加进去的时候,页面的视窗布局就会伸缩(在iPhone下到 320px),这样子文本就能适应了。


苹果的改变

当苹果分辨率变化时会对 device-width 媒体查询 和 meta 标签产生影响吗?当然我还不能确定,但是我希望对页面开发没有任何变化。

meta 标签

meta 标签方面最容易解释。Apple 专门发明它,为了让用户在iPhone 上的内容呈现更精准,并不遗余力的推广给开发者。这也意味着通过 <meta> 标签读出的设备宽度不会改变。

事实上, Nexus One 是Apple的开路先锋。它的官方屏幕宽度(在竖屏下)是480px,但是当你部署 <meta>时,它会吧屏幕宽度定义为 320px,是官方宽度的 2/3。

如果我理解的正确,这就是 John Gruber 讨论的talking about Nexus 的显示和它会丢失额外的一像素,这就导致了比实际像素数少了 1/3.这样子就使 Nexus 得到的<meta>准确。

从基本上说 Google 已经增加了一个被称为dips的层;device-independent pixels。这个层来自于官方,被称为屏幕尺寸和网站开发者使用的CSS像素。

应此我希望新的iPhone也使用 Nexus 的方法,当我们使用<meta>标签媒体查询将屏幕尺寸汇报为320px(也就说是正式分辨率的一半)。它将是一半而不是2/3,因为新iPhone的像素密度比Nexus 高更多。

媒体查询

这样就剩下 dveice-width 媒体查询成了一个唯一的问题区域。当Nexus使用480px作为屏幕宽度的时候,事实也证明320像素可能更合适。我们将会看看Apple在这方面怎么做。

另一个重要的问题是,是否把中间层(dips)也作为媒体查询的一个条件。总体上我希望是这样,事实的设备宽度对网页开发人员来说并不重要,我们希望知道我们能在屏幕上呈现多少内容,dips 中间层看起来更能适应这个要求。

不幸的是,Nexus 现在并不支持,目前媒体查询技术还仅仅关注 device-width 仍然是480px,而不是 320px。但是可能 Apple 能为网页开发者解决这个问题。

因此现在的情况对普通网站和使用 <meta>就比较明朗了;当使用媒体查询的时候,问题就变的复杂了。

让我们拭目以待。

中文原文:关于像素的是是非非
英文原文:A pixel is not a pixel is not a pixel
转载请注明以上信息,以表示对作者和译者的尊重,多谢!