4

デバイス (およびその向き) に応じて適切なスタイル シートを適用する Web アプリを開発しようとしています。

合計で 5 つのメディア クエリがあります。

//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">

//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">

//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">

//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">

//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">

デスクトップ、iPad、iPhone ではすべて動作しますが (ブラウザー バージョンと Web アプリ バージョンの両方で)、Android ブラウザーではランドスケープ メディア クエリが失敗しますか? 何か案は？「max-device-width」を間違えましたか?

4

2 に答える 2

1

これは、ほとんどの新しい Android フォンがデバイスによって幅 480 x 高さ 800 のようなものであるため、Android ランドスケープは、タブレット ランドスケープ CSS によって取得される必要があります。しかし、Androidがスタイルシートを取得しないという同様の問題に遭遇したと思うので、これを追加するとすべてがうまくいくように見えました...

<meta name="viewport" content="width=device-width">

スタイルシートのリンクの上に頭の中にこれがありますか?

于 2011-07-18T23:36:24.950 に答える
0

Droid1 では、ビューポートのサイズは 320 x 569 です。

于 2011-07-22T20:03:30.443 に答える