iPhone 4视网膜图像无法正确调整大小

我正在尝试为移动网站节省图像。我为iPhone 4节省了一个用户（宽度640px）和低分辨率（宽度320px）。如果我在Safari移动版中查看jpg图像，它会显示全宽（人像模式）。如果我在CSS中使用它作为背景图像，它将占用大约2/3的屏幕（人像模式）。iPhone 4视网膜图像无法正确调整大小

我使用这个代码来检测视网膜屏幕

@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), 
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait) { 

#header 
{ 
    background:url(images/hires/header.jpg) no-repeat; 
    width:640px; 
    height:257px; 
} 

}

修复它是唯一的事情：

<meta name="viewport" content="width=640" />

在我的HTML头。但是，这完全可以用于像Atrix 2那样宽度为540px的东西。我试过了：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

然后图像大约是屏幕宽度的两倍（人像模式）。

我不能为我的生活找出我做错了什么或如何迎合每一个手机/分辨率/屏幕尺寸。

来源

2012-05-10 ahainen

好吧，这似乎解决了，一直没能尝试它比iPhone 4的其他的东西，iphonetest.com

（初始规模= 0.5是东西帮助）不知道它是什么

来源

2012-05-10 15:42:07 ahainen

*注 - 这固定它的肖像视图，但一旦我切换到风景，风景是双倍大小。修复肖像的东西打破了风景。啊... – ahainen

iPhone 4视网膜图像无法正确调整大小

回答

相关问题