25

メディアクエリで 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"/>

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

4

9 に答える 9

49

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

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

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

于 2012-10-18T07:45:52.580 に答える
14

現時点では、モバイル デバイスは非常に改善されているため、画面の解像度はデスクトップの画面の解像度と同等であり、場合によってはさらに優れています。

たとえば、Samsung の Galaxy S4 には 1080X1920 ピクセルのフル HD 画面があります。

しかし、レスポンシブ デザインでは解像度を確認し、解像度に合わせて調整する必要があります。メディア クエリを追加しようとすると、最小幅を 1000px として、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  */

}
于 2013-10-18T03:34:06.543 に答える
9

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

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

}
于 2012-11-15T09:23:33.107 に答える
6

前に述べたように。ハンドセットでこのMedia Query 検出器を使用し、より流動的なデザインを使用することも検討してください。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{}
}
于 2012-10-23T10:37:03.383 に答える
5

Samsung Galaxy SI & II: 320 x 533、ポートレート モード (CSS ピクセル密度は 1.5)

Samsung Galaxy S III: 360 x 640、ポートレート モード

于 2013-03-21T13:22:30.637 に答える
1

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メディア クエリ診断ツール テストのスクリーンショットです。どちらもオリエンテーションなしで機能しますが、ロード/リフレッシュなしでは妥当性を変更しないことに注意してください。

これが、使用する可能性のある他のクエリと競合せずに役立つことを願っています

于 2014-01-07T03:42:48.043 に答える
0

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

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

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

幅：480px、高さ：800px（最大幅800）のSamsung Nexus S Android2.3.6ストックブラウザ

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

参照： http： //pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

于 2012-12-28T03:09:33.230 に答える