css media queries：幅、ピクセル比率などを指定しないターゲットモバイルデバイス

Question

サイズを問わずすべてのタブレットと携帯電話をターゲットにしたいとします。サイズを指定せずにこれを行うことは可能ですか？それとも、デスクトップではなくモバイルデバイスをターゲットにするための唯一の方法です

Answer 1

CSS3 specには、@media handeldが記載されていますが、おそらくブラウザがサポートされていません。

しかし、this siteが便利で、モバイル用の他のいくつかのメディアクエリ手法が説明されています。

Answer 2

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

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

しかし、使用されるある種のオーバーレイポップアップを使用しているため、私は一定の幅以下（デスクトップを含む）すべてのデバイス上のサイトの圧縮バージョンを見せたかった私の場合は

、 position: fixedはハンドヘルドでのみ変更する必要があります（cssプロパティはすべてのデスクトップブラウザで機能しますが、すべてのハンドヘルドでは機能しないため）。

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

私は640のではなく、デスクトップブラウザの下にあるすべてのハンドヘルドをターゲットにした：だからそのために、私は追加のルールを使用していました。ちなみに、これは640pxよりもデバイスの幅が広いため、iPads（これは私が望んでいた方法）をターゲットにしていません。

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

Answer 3

私はあなたが純粋なCSSアプローチであまりにも多くの運を持っているとは思わない。あなたはmodernizer.jsのアプローチのラインに沿って何かをしたいと思います。私たちはJSを使ってデバイスを検出し、それに基づいてボディにクラス名を追加します。

What is the best way to detect a mobile device in jQuery?

そして、様々なサイズの特殊なケースモバイルデバイスにあなたのメディアクエリでそのクラスが含まれています。