私はメディアクエリを使用してWebサイトを設計しており、デスクトップとiPadですべてが見栄えがします...しかし、私の電話は別の話です。新しいスマートフォンであるため、ピクセルサイズは1024x768であり、タブレットのように表示しようとしています。メディアクエリを使用して、1024x768の電話がiPadとは異なる表示になるように指定するにはどうすればよいですか？助けてくれてありがとう。
これが私が始めに取り組んできたものです：
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
最初の考え
お使いの携帯電話の正確なレイアウトの問題に関するいくつかの追加情報が役立ちます。また、適切な<meta>タグを使用していることを確認してください（@Lokaseが提案したように）。良い要約はここで見つけることができます。
2つの可能な解決策
すでに使用しているメディアクエリを使用して組み合わせて、携帯電話をターゲットにしようとしmin-heightますmax-height。
width
それがオプションでない場合は、javascriptを使用して、ユーザーエージェントを検出しようとすることで電話をターゲットにすることができますが、これはヒットまたはミスする可能性があります。
警告の言葉
とはいえ 、特定のビューポート用に設計しようとすると、無限のフラストレーションが発生します。より時間がかかる場合は、前に戻ってレイアウトを再考し、メディアクエリをどのように使用しているかを再考する必要があります。これは実装するのが面倒な場合がありますが、長期的には自分自身に感謝するでしょう。現在市場に出回っている高解像度のAndroidスマートフォンの数と、まもなく出荷される予定のAndroidスマートフォンの数を考えてみてください。