cssメディアクエリ:幅、ピクセル比などを指定せずにモバイルデバイスをターゲットにします

Question

サイズに関係なく、すべてのタブレットと携帯電話をターゲットにしたいだけだとしましょう、これに対するメディアクエリはありますか？サイズを指定せずにこれを行うことは可能ですか？または、サイズを使用して、デスクトップではなくモバイルデバイスをターゲットにする唯一の方法ですか？

Answer 1

CSS3仕様に@media handeldが記載されていますが、ブラウザはサポートされていない可能性があります。

いいえ。

ただし、このサイトが役立つ場合があります。他のメディアクエリについて説明しています。モバイル向けのテクニック。

Answer 2

私は数日間これに苦労してきましたが、ハンドヘルドデバイスをチェックする良い方法はmax-device-widthです。デスクトップpcはこれをブラウザに送信しませんが、ほとんどの（すべてではないにしても）ハンドヘルドはこれを使用します。

私の場合、特定の幅を下回ると、すべてのデバイス（デスクトップを含む）にサイトの圧縮バージョンを表示したかったのですが、そのために使用しました

@media all and (max-width: 640px)

しかし、使用される特定のオーバーレイポップアップ position: fixed cssプロパティはすべてのデスクトップブラウザで動作しますが、すべてのハンドヘルドでは動作しないためです）。そのために私は追加のルールを使用しました:

@media all and (max-device-width: 640px)

私は640以下のすべてのハンドヘルドをターゲットにしていますが、デスクトップブラウザはターゲットにしていません。ちなみに、これは640pxよりも高いデバイス幅を持っているため、iPadをターゲットにしていません（これは私が望んでいた方法です）。

すべてのデバイスをターゲットにしたい場合は、幅に関係なくデバイスを除外しないように、最小幅（1px）を低く選択してください。

Answer 3

純粋なCSSアプローチで運が良すぎるとは思わない。modernizer.jsアプローチと私たちJSに沿って何かを実行して、デバイスを検出し、それに基づいて本体にクラス名を追加する必要があります。

最善の方法は何ですかjQueryでモバイルデバイスを検出するには？

次に、さまざまなサイズの特殊なケースのモバイルデバイスへのメディアクエリにそのクラスを含めます。