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，我期待960x480，按照： 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;
    }
}