使用 Phonegap 在 iOS 模拟器上进行分辨率检测

Question

我是这个开发领域的新手，我正在尝试弄清楚如何使用 Phonegap 制作 iOS 应用程序。我为不同的分辨率创建了四个不同的 CSS 文件。

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="css/ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 2048px)" href="css/ipad-retina.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/iphone.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 960px)" href="css/iphone-retina.css" type="text/css" />

我发现模拟器总是加载相同的 CSS 文件，即使我更换了设备。有没有办法让它正确加载css文件？

谢谢大家，顺便问一下，我的 CSS 调用正确吗？

Answer 1

这是实现您所追求的目标的方法。包括每个部分所需的特定 CSS。

/* Non-Retina */
    @media screen and (-webkit-max-device-pixel-ratio: 1) {
    }

    /* Retina */
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
    }

    /* iPhone Portrait */
    @media screen and (max-device-width: 480px) and (orientation:portrait) {
    } 

    /* iPhone Landscape */
    @media screen and (max-device-width: 480px) and (orientation:landscape) {
    }

    /* iPad Portrait */
    @media screen and (min-device-width: 481px) and (orientation:portrait) {
    }

    /* iPad Landscape */
    @media screen and (min-device-width: 481px) and (orientation:landscape) {
    }