Question

我自己没有用Retina MacBook来测试这些东西，互联网上似乎有很多关于高像素密度显示器网页设计的混淆。

现在，我假设带有Retina显示屏的MacBook上的WebKit将页面缩放了大约两倍的大小，因为大多数网页都不是为了适应更高的像素密度而构建的？

在我看来，设计这些或实际上任何类型的显示器的理想情况是使用ems而不是像你一样的像素;

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 150%; }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
    body { font-size: 200%; }
}

并且整个页面将相应地缩放。或者是吗？在Retina MacBooks上运行的浏览器上的默认字体大小是16px还是更高？因为如果它更高，缩放效果会倍增。

我想我的问题是;如果我一直使用ems，我唯一需要做的就是改变每个设备像素比的字体大小？

Answer 1

好的，这是一个非常严重的误解（这很酷！:)），所以这里是你可能想要做的简要说明。

首先，任何最近的iPhone / iPod / iPad或许多Android手机都有Hi DPI屏幕，因此您可能已经有了可以测试的东西。如果没有，而且你正在专业地做这件事，那就买一台4G iPod Touch。

就其工作原理而言，99％的东西，你什么都不做。如果你的建议如何，那么大多数网站的规模应该是他们应该的四分之一，并且互联网将被破坏。

对于字体，SVG，CSS框阴影，渐变和任何其他CSS绘制的东西，这都很好。没有任何额外的工作，这些东西看起来很棒。（因此，为什么我们一直在推动CSS中的所有内容。）

对于位图（即pngs，jpgs，gifs），您需要做的就是为图像提供2倍的分辨率，但大小与正常相同。

例如，如果您的页面的图像是100px×100px，那么您将提供200px×200px的图像，但是在CSS中指定或在HTML中指定它是100px×100px。

这样做的原因是屏幕上的像素与CSS像素不同。这是一件好事，因为正如我所说，事情会很小。

我想，事后看来，最好将CSS中的px单位称为不同的内容，例如dot或其他内容，但是你去了。

您有时会看到与设备无关的像素的引用，这是CSS px与屏幕上的真实像素之间的差异。

Answer 2

Retina显示屏不会使元素的大小加倍。它只影响网络上的图像。

对于图像中的每个“网络像素”，它需要4个（我认为）“屏幕像素”，因此图像会被拉伸以填充这些额外的像素空间，使其在视网膜显示屏上看起来不那么清晰。图像应以较高的DPI导出，并通过媒体查询或Javascript提供给Retina显示器。

文本，CSS效果，画布，SVG矢量等不受视网膜显示直接影响。

CSS中的像素密度，视网膜显示和字体大小

2 个答案: