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;
    }
}

iPhone Safari实际分辨率

1 个答案: