1

我在这个开发领域很新，我正在尝试使用 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 调用正确吗？

4

1 回答 1

3

这是实现您所追求的目标的一种方法。包括每个部分所需的特定 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) {
    }
于 2012-07-13T15:31:23.043 回答