web-dev-qa-db-ja.com

Galaxy S3のCSSメディアクエリ

誰もがメディアクエリでSamsung Galaxy S3をターゲットにする方法を知っていますか？

現在、私は使用しています：

iPad

<link rel="stylesheet" media="all and (device-width: 768px)"                                                href="css/device-768.css"/>

その他のタブレットデバイス

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>

電話（S3はこれを使用しませんでした-理由はわかりません）

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)"    href="css/phones.css"/>

私もテストしました

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"    href="css/phones.css"/>

しかし、うまくいきませんでした...

csshtml5media-queriesresponsive-design
25
jacksbox

メディア機能の値を指定することにより、デバイスがメディアクエリにどのように反応するかを示すページを設定しました。テストするデバイスのページにアクセスするだけです。

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

そこから、さまざまなデバイスが報告する内容に基づいて、使用するメディアクエリを決定できます。一般的に、特定のデバイスをターゲットにすることは悪い考えです。ウェブサイトが手元の表面に適応するように、ディスプレイのサイズと密度をターゲットにする必要があります。

49
pieroxy

現時点では、モバイルデバイスは大幅に改善されており、画面の解像度はデスクトップ画面の解像度よりも似ており、場合によってはさらに向上しています。

たとえば、SamsungのGalaxy S4には1080X1920ピクセルがあります-フルHDスクリーン！

ただし、レスポンシブデザインでは解像度を確認し、解像度に合わせて調整する必要があります。メディアクエリを追加しようとすると、1000ピクセルの最小幅と、Samsung Galaxy S4で確認すると、何も起こらなかったことがわかります。

その理由は、モバイル高密度画面にはピクセルの2つの側面があるためです。

実際の解像度最初の解像度は工場の実際の解像度で、主にビデオと画像用です。 Samsung galaxy S4の実際の解像度は1080X1920です。

CSS解像度2番目の解像度はブラウザ用です。開発者にとっては、実際の画面解像度に応じてではなく、異なる行動をとる必要があるということです。 Samsung Galaxy S4では、CSS解像度は360X640です。

Samsung Galaxy S4解像度：実際の解像度：1080X1920 CSS解像度：360X640

CSS解像度を取得する方法は？ウィキペディアには、すべてのモバイルデバイス解決テーブル（タブレットとモバイルデバイス）があります。 http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

/*(ldpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:.75){

  /*CSS  */
}

/*(mdpi) Android*/
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {

  /*CSS  */
}

/*(hdpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:1.5){

  /*CSS  */

}
13
Xman Classical

これを使用して、s3のポートレートビューのみをターゲットにしました。

@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) { 

}
9
Rowan

前述のように。この Media Query detector を使用し、より優れた流動的なデザインの使用を検討してください-CSSハックはよくありません-あなたはすべきです優れた流動的なデザインがあれば、シナリオの90％で実際にそれらを必要としません。

サムスンギャラクシーS3

@media only screen and (max-device-width: 720px) and (orientation:portrait) {
  .your-css{}
}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
  .your-css{}
}
6
TheBlackBenzKid

Samsung Galaxy S I＆II：320 x 533、ポートレートモード（CSSピクセル密度は1.5）

Samsung Galaxy S III：60 x 64、ポートレートモード

5
Jen-Lars

Android 4.1.2のSamsung S3では、すべてのメディアクエリ機能（最大高さ、幅、デバイスの高さと幅、さらには色：8）を試しましたが、このページの2番目の回答に加えて：

Samsung S3デフォルトブラウザー

/* Samsung S3 default browser portrait*/
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) {
body { background:yellow;} 
}

/* Samsung S3 default browser landscape */
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape)  {
body { background:#000;} 
}

スクリーンショットはこちらpieroxy メディアクエリ診断ツールのテスト用。 注意してください両方とも向きなしで動作しますが、ロード/リフレッシュなしで妥当性を変更しません。

これがあなたが使うかもしれない他のどのクエリとも衝突しないことを助けてくれることを願っています

1
hsobhy

これはテストされ、機能します。

@media only screen and
(device-width: 720px) and
(device-height: 1280px)  and
(-webkit-min-device-pixel-ratio: 2)
0
user2060451

一般的なタブレットの幅を避けながら、これは今日のほとんどの携帯電話（HTC、iPhone、Samsung）に安全に適用されると思います（iPad iPad 3/4 iOS 6はポートレートで672px） 。

<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/>

この電話は奇妙な魚でしょう：

Samsung Nexus S Android 2.3.6 Stock Browser幅：480px、高さ：800px（max-width 800）

通常、特定のデバイスをターゲットにすることはお勧めしませんが、奇妙な魚をターゲットにしたい場合は、他のユニークな属性があるため可能です。個人的にはデスクトップとワイドスクリーンで直接テストできるため、max-widthを使用することを好みます。また、実際にブラウザの幅を640未満に変更したとしても、モバイルビューを表示しているユーザーには大したことはありません。

リファレンス： http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

0
bcm