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

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

1 个答案: