モバイルデバイス（iOS/Android携帯/タブレット）のブラウザが使用されているかどうかを検出します。

Question

ハンドヘルドブラウザ（iOS/Androidの携帯電話/タブレット）が使用されているかどうかを検出する方法はありますか？

これは、ハンドヘルドデバイスのブラウザで半分の要素を作成するという目標で試しましたが、違いはありません。

width: 600px; 
@media handheld { width: 300px; } 

どうすればいいですか？

編集：jmaes'の答えで参照するページから私は

@media only screen and (max-device-width: 480px)を使用。

Answer 1

更新日（2012年6月）：デバイスのランドスケープがタッチデバイスではなくタッチデバイスである間の線がゆっくりとぼやけているため、すべての解像度でタッチとマウス入力をサポートしようとしています。 iPad Proは13インチノートパソコンの解像度でタッチ専用です.Windowラップトップにはタッチスクリーンが付いてくることがよくあります。

他の同様のSO回答（この質問に対する他の回答を参照）は、デバイスの並べ替え、ユーザが使用しているが、それらのどれもが、フールプルーフではない。私はあなたが絶対にデバイスを決定しようとする必要がある場合は、それらの答えをチェックアウトすることをお勧めします。

---

iPhoneの、いずれかに、無視handheldクエリ（Source）。同様の理由で他のスマートフォンでも同様のことが起こっても、私は驚くことはありません。

私がモバイルデバイスを検出するために使用する現在の最良の方法は、幅を知り、corresponding media queryをキャッチすることです。そのリンクには人気のあるものがいくつか掲載されています。クイックグーグルで検索すると、必要なものが他にも見つかります。

iPhone専用のもの（Retinaディスプレイなど）については、最初に投稿したリンクをチェックしてください。

Answer 2

検出モバイルデバイス

関連の答え：https://stackoverflow.com/a/13805337/1306809

本当に誰にでもできるのです単一のアプローチがありません。最良の方法は、必要に応じてさまざまなトリックをミックスしてマッチさせることです。ハンドヘルドデバイスの幅広い検出に成功する可能性が高まります。いくつかのオプションについては上のリンクを参照してください。

Answer 3

モバイルデバイスを検出しないでください。代わりにモバイルデバイスを検出してください。

現代（2016）は、現代のブラウザ（http://caniuse.com/#feat=css-media-resolution参照）で動作するように見えるインチ/ cm/pxあたりのドットを検出する方法があります。私は、比較的小さな画面、向きは問題ではない、そして固定されたコンピュータモニタを区別する方法が必要でした。

多くのモバイルブラウザがこの機能をサポートしていませんので、1はすべてのケースのための一般的なCSSコードを書いて、大画面のためにこの例外を使用することができます。

@media (max-resolution: 1dppx) { 
    /* ... */ 
} 

のWindows XPと7の両方が1のデフォルト設定を持っていますピクセル（または96dpi）あたりのドット。私は他のオペレーティングシステムについてはわかりませんが、これは私のニーズにとっては本当にうまく機能します。

編集：dppxはInternet Explorerでは動作しないようです。代わりに（96）dpiを使用してください。

Answer 4

私は、これは古いスレッドです知っているが、私はこれが誰かを助けるかもしれないと思った：

モバイルデバイスは、コンピュータが高さよりも大きな幅を持って、逆に、幅よりも大きい高さを有しています。たとえば、

@media all and (max-width: 320px) and (min-height: 320px) 

だから、私はすべての幅がそうしなければならないと思います。

Answer 5

モバイルデバイスを検出する信頼性の高い方法は、navigator.userAgent文字列を調べることです。例えば、私のiPhone上でユーザーエージェント文字列は次のとおりです。

のMozilla/5.0（iPhone; CPU iPhone OS 10_3_2のMac OS Xなど）のAppleWebKit/603.2.4（ヤモリのようにKHTML、）バージョン/ 10.0モバイル/ 14F89 Safari/602.1

この文字列には、iPhoneとモバイルという2つの通知キーワードが含まれています。私が提供されていないデバイスのための他のユーザーエージェント文字列：この文字列を使用して

https://deviceatlas.com/blog/list-of-user-agent-strings

、私は次のコードを使用して、真または偽のいずれかに私のウェブサイト上でJavaScriptのブール変数bMobileを設定します。

var bMobile = // will be true if running on a mobile device 
    navigator.userAgent.indexOf("Mobile") !== -1 || 
    navigator.userAgent.indexOf("iPhone") !== -1 || 
    navigator.userAgent.indexOf("Android") !== -1 || 
    navigator.userAgent.indexOf("Windows Phone") !== -1 ;