web-dev-qa-db-ja.com

Android）で期待どおりに動作しないメディアクエリ

4つのメディアクエリがあります。 1、3、4番目の作品ですが、2番目の作品は活性化していないようです。

480x720（2番目のメディアクエリ）がデフォルトで最初のメディアクエリになるのはなぜですか？

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

期待されること：

1st Media Query CSS Output2nd Media Query CSS Output3rd Media Query CSS Output4th Media Query CSS Output

実際に起こっていること：

2nd Media Query fails1st Media Query passes3rd Media Query passes4th media query passes

480x720（2番目のメディアクエリ）がデフォルトで最初のメディアクエリになるのはなぜですか？

androidcssmedia-queries
14
Xavier

私はあなたがの線に沿ってあなたのメディアクエリでデバイス解像度の検出を行う必要があると思います

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}

チェック モバイルのベストプラクティスに関するDavid Calhounの優れた記事 。

9
DyeA

私はAndroidとCSSの初心者です。

Android index.htmlファイルのヘッダーに1行で実際のサイズを指定しないことを解決しました：

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

それ以来、私のCSSファイルは私が期待したことをしました！

24
JohanO

だから私はたくさんの研究をした後、私はこの結論に達しました、Android彼らがそうだと言う電話480px x 720px（800pxまたは854px）実際にはそうではありません、彼らは画面密度を高くして要素を大きく見せ、実際に実行されるようにします20px by XXXただし、必要に応じて解像度を低いスペックに変更できます。メディアクエリが機能しなかった理由は、サイズが問題のデバイスに関連していなかったためです。

SDKを使用している場合は、画面密度を160に変更して、幅480ピクセルに対応しました。

そして、SDKと2xハンドセットでこれをテストしたことを確認できます。

注：これは私の個人的な経験であり、他のユーザーとは異なる場合があります

12
Xavier

Androidプラットフォーム用のCordovaアプリケーションで作業しているときに、同じ問題が発生していました。最後の回答のおかげで、メディアクエリとデバイスの幅の違いがどこにあるかを調べようとしました。画面。

私は最初に試しました：

@media only screen and (max-device-width: 480px) { ... }

HTC DesireHDのようなデバイスに合わせるには|サムスンギャラクシーS。しかし、サムスンギャラクシーノートのために特定の修正もしなければならなかったので、私は使用しました：

@media only screen and (min-device-width: 481px) { ... }

ただし、前述のように、これらの解像度はWebビューでは実際には使用されておらず、ピクセル密度の値が変更されています。

そのため、DHDとSGSの両方で、次にSGNで認識された幅のピクセル数を知りたいと思いました。

window.innerWidth

幅480pxの電話の場合、実際には320pxが認識されていました。 800pxのGalaxyNoteの場合、認識されたのは500pxだけでした。それを見たとき、私はメディアクエリを調整しました、そしてそれはうまくいきました。

7
jcbee

これが私の経験で見つけたいくつかのことであり、それはより高い解像度の検出が原因である可能性があります。私のお気に入りのテスト電話は、縦向きで320px（max-device-width）X 480px（max-device-width）です。ただし、使用するモバイルブラウザによっては、最大幅が最大850pxになる場合があります。 Opera mobileは、max-device-width 320pxのデバイス上にあるにもかかわらず、デフォルトのmax-widthとして850pxを使用します。さらに良いことに、このデバイスに組み込まれているAndriodブラウザーにはデフォルトのmax-があります。幅550px。Dolphinのデフォルトは同じ最大幅550pxです。通常FireFoxモバイルでテストすることはありませんが、Operaのようなgeckoベースのブラウザなので、850pxの範囲に収まっても驚かないでしょう。誰かがそれを知っているか、テストしましたか？

私は通常、320 X 480デバイスをアドレス指定するときに、3条件のメディアクエリを使用します。

@media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

また、私は通常、このメタタグをメインページのヘッダーに配置しますここにコードを入力してください

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

以下は私を助けてくれなかったようです、それは私がもう少し調査をして上記の情報を理解したときです。 <meta name="viewport" content="width=device-width" />それが他の誰かを助けることを願っています。

2
kevinB

携帯電話は解像度の混乱のブラックホールが増え続けているので、自分自身を識別するように携帯電話に伝える必要があります。また、スケーリングを1に設定し、ユーザーのスケーリングを取り除く必要があります。これをコードに入れると、うまくいきます。

このスニペットをHTMLの先頭の<meta character...>タグの下の行に挿入します。

<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
1
richardsonae
  1. すべてのpx値を16で割ってem値に変換します（16pxは1 emになります）。これにより、使用するフォントに関係なく、そのサイズが正しい比率になります。
  2. メタビューポートに追加します：target-densitydpi=medium-dpi。これにより、em-サイズがすべての（ほとんどの？）デバイスで等しく動作することが保証されます
0
ToBe_HH