2

私はhtml5 + JQueryMobile + Phonegapを使用して最初のハイブリッドアプリを開発しています...私はSamsung w（android 2.3.3）、Iphone 4s、およびIphone5のIphoneSimulatorでアプリをテストしています...ホームページでi 「このデバイスに別の背景画像を使用したい...CSS メディア クエリを使用しようとしています...

/* IPHONE 4 - IPHONE 3*/
@media screen and (height: 480px)  {

#home {
background-image:url(images/home/home_Med.png);
background-size: auto 100%;
}

}


/* GALAXY S1 - S2 */
@media screen and (width: 480px)  {

#home {
background-image:url(images/home/home_Small.png);
background-size: auto 100%;
}

}


 /* GALAXY S3 - IPHONE 5*/
@media screen and (height: 568px),screen and (height: 1280px) {
#home {
background-image:url(images/home/home_Big.png);
background-size: auto 100%;
}

}

Media Query はさまざまな Iphone で完全に機能します...しかし、Samsung W (S1 や S2 のような 480x800) または Galaxy S3 ADV でテストすると機能しません...さまざまなメディアを試してみましたクエリ...そして、Samsung Wの320で使用した場合、それは機能します!!!....おそらく、Androidデバイスの解像度について何かを理解していません...誰かがそれを説明できますか?! ありがとう

4

2 に答える 2

1

画面上の 1px != css 上の 1px のように、ピクセル比率も確認することをお勧めします。

@media only screen (-moz-min-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2)

詳細については、quirksmode に関するこの記事を確認してください。

于 2013-04-17T09:52:23.410 に答える