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視網膜圖像無法正確調整大小

回答

相關問題