0

我刚刚开始阅读有关 iphone 4+ 上的 Retina Display 的信息，我想知道如果您没有 imagefilename@2x.extension，现在所有这些 iphone4+ 是否在网页上显示的图像是正常大小的 2 倍？！

如果我必须编写所有额外的代码（如媒体查询）并在每个背景图像后添加@2x，这将是一个巨大的头痛......

如果是这样，您最快的解决方案是什么？谢谢你。

4

2 回答 2

3

文件名与您的网站无关。您可以随意命名您的图像文件。'@2x' 只是许多用于视网膜网络图像的非正式标准。如果您想使用视网膜图像，您可以使用媒体查询通过 CSS 将图像换成更高分辨率的版本。

http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

于 2012-04-21T19:58:49.867 回答
3

Mobile Safari 将其解释px为点，因此您无需为您的应用程序在视网膜设备上运行做任何事情。

但是，如果您想提供高分辨率图像，请将其包装在 CSS 媒体查询中：

@media all and (-webkit-device-pixel-ratio:2) {
    #id {
        background-image: url(background@2x.png);
        background-size: 100% 100%;
    }
}
于 2012-04-21T20:55:47.733 回答