0

2 つの主要な要素を持つページのレスポンシブ レイアウトに取り組んでおり、そのうちの 1 つを標準の電話画面 (最大約 5 インチとしましょう) で非表示にする必要があります。サブ条件は、横向きモードで、画面幅が 800px までです。通常、スマートフォンはピクセル比 (> 1) や解像度 (> 130dpi) が高いため、一般的なモニターと簡単に区別できます。それでも、Chrome Dev Tools を使ってテストしたところ、pixel-ratio=1 で resolution=96dpi のモバイルがいくつか見つかりました。この仕様では、一般的なモニターとメディア クエリを区別できません。

@media only screen and (orientation:landscape) and (max-width:800px) and (min-resolution: 1dppx);

前述のとおり、この Media Query は一般的なモニターにも影響します。ケースを分離するために使用できる他の仕様はありますか?

問題についていくつかのデバイスを投入するには:

  • Motorola Droid 3/4/Razr/Atrix (540x960px; ピクセル比:1; 解像度 96dpi)

  • Motorola Droid Razr HD (720x1280px; ピクセル比:1; 解像度 96dpi)

  • Sony Xperia Sola (480x854px; ピクセル比:1; 解像度 96dpi)

ありがとうございました。

4

0 に答える 0