iPhone Safari實際分辨率

Question

我只是有點困惑。

我使用jQuery Mobile和：

<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no' name='viewport'> 

我輸出

alert(Data.$activePage.find('div[data-role=content]').width()); 

，並使用我的iPhone 4我得到了分辨率480x320，我所期待的960×480，按照：http://www.iphoneresolution.com/

任何人都可以向我解釋這裏發生了什麼？我需要確保我的野獸在iPhone 3,4，ipad safari中看起來不錯，並期待他們有差異分辨率

Answer 1

iPhone 4具有更高的技術分辨率，這是真的。不過，它仍然像480x320那樣報告和縮放。只是假裝它與iPhone 3的接口相同。處理更高分辨率的訣竅是，您需要使用更高分辨率的圖像，以使其看起來儘可能清晰。例如，如果你有一個帶有圖像背景的div，在iphone 4上，你希望在CSS中使用分辨率更高的圖像。

例如：

.logo-large{ 
    background-image:url(../images/logo.png); 
    background-repeat:no-repeat; 
    background-position:0 0; 
    position:relative; 
    top:0; 
    left:0; 
    width:290px; 
    height:65px; 
} 

/* HD/Retina -----------------------------------------*/ 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-resolution: 240dpi) { 
    .logo-large{ 
     background-image:url(../images/logoHD.png); 
     background-size:290px 65px; 
    } 
}