不可缩放的网络视图,可在iPhone和iPhone4分辨率下工作

这将为iPhone4加载一个特定的样式表:

<link
    rel="stylesheet" type="text/css" href="/css/style.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

http://aralbalkan.com/3331

这将加载iphone4样式表

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

然后在低分辨率样式表中,神奇的做法是将background size属性设置为低分辨率图像的大小。

.demoImage
{
    background-image: url(../images/my-image-64.png);
    background-size: 64px 64px;
    background-repeat: no-repeat;
}

retina.css 只需显示双分辨率版本

.demoImage
{
    background-image: url(../images/my-image-128.png);
}

现在css背景图像将显示一个128x128的图像,就好像它是64个css像素,提供了一个1:1的图像像素来显示iphone4上的像素图像。

我也有同样的问题。我还没有时间去研究它,但我的想法是创建每英寸像素更高的图形,并将其用于iphone3g和iphone4。

我不确定这是否行得通。但值得一试。

CSS media query 应该工作:

@media only screen and (min-resolution: 300dpi) { ... }

serving high-res images . 这篇文章主要是关于打印样式的,但在这里也同样适用。