1

私はこの開発分野にかなり慣れていないので、Phonegapを使用してiOSアプリの作成を理解しようとしています。解像度の異なる4つの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 に答える