css - 使用Phonegap在iOS Simulator上进行分辨率检测

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) {
    }