3

私は、テストするいくつかの異なるタブレットを持っている人、または広範な理論的理解を持っている人が、一般的なタブレットサイズを対象とする私のクエリ ( http://nmsdvid.com/snippets/から取得) が機能するかどうか教えてくれることを望んでいました.

私の質問の主なポイントは、オペレーター (特に 4 つの異なるデバイスのいずれかをターゲットにする場合) が正しいかどうかです。

@media only screen and (
    ((min-device-width : 768px) and (max-device-width : 1024px)),
    ((min-device-width : 600px) and (max-device-width : 1024px)),
    ((min-device-width : 800px) and (max-device-width : 1080px)),
    ((min-device-width : 800px) and (max-device-width : 1280px))
) and (orientation : landscape) {

    body{ background-color: pink; }

}
4

2 に答える 2

8

残念ながら、あなたの質問に対する答えはありません。「一般的なタブレットのサイズ」という質問に対する答えがないからです。古いラップトップは現在のタブレットよりも幅が狭く、タブレットはネットブックのように解像度が広くなっています。

メディア機能のデータベースを調べて、最善を尽くしてください。

とは言っても、ロカセの回答は最高です。デバイスをターゲットにするのではなく、すべての解像度で Web サイトを適切に表示するようにしてください。それほど複雑ではありません。

于 2012-11-04T23:25:59.383 に答える
4

私が見つけた最善のアプローチは、デバイスに依存しないレスポンシブ レイアウト アプローチを使用することです。

メディア クエリを一定の範囲 (つまり、対象とするすべてのタブレットをカバーするサイズ) に設定し、流動的なアプローチを使用して UI をデバイスのサイズに合わせて拡張または縮小します。

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

毎日非常に多くのデバイスが市場に出回っています。

于 2012-09-06T12:54:54.003 に答える