web-dev-qa-db-ja.com

モバイルデバイス（iOS / Androidフォン/タブレット）のブラウザーが使用されているかどうかを検出する

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

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

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

それはできますか？

編集：私が使用したjmaesの回答の参照ページから

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

cssmedia-queries
40
seron

更新（2016年6月）：デバイスのランドスケープが物事の間の線をゆっくりとぼかしているため、すべての解像度でタッチおよびマウス入力をサポートするようになりましたタッチデバイスではありません。 iPad Proは、13インチラップトップの解像度でタッチのみです。Windowsラップトップには、タッチスクリーンが搭載されていることがよくあります。

他の同様のSO回答（この質問の他の回答を参照）には、ユーザーが使用しているデバイスの種類を把握するためのさまざまな方法がありますが、誰も絶対に使えません。デバイスを特定する必要がある場合は、これらの回答を確認することをお勧めします。

たとえば、iPhoneはhandheldクエリを無視します（ Source ）。そして、他のスマートフォンも同様の理由でそうだとしても驚かないでしょう。

モバイルデバイスを検出するための現在の最良の方法は、モバイルデバイスの幅を把握し、 対応するメディアクエリ を使用してそれをキャッチすることです。そこにあるリンクには、人気のあるものがいくつかリストされています。 Googleですばやく検索すると、必要な他の検索結果が表示されます。

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

28
jamesplease

モバイル機器の検出

関連する回答： https://stackoverflow.com/a/13805337/1306809

真に確実な単一のアプローチはありません。最善の策は、必要に応じてさまざまなトリックを組み合わせて一致させることで、より広範囲のハンドヘルドデバイスを正常に検出できる可能性を高めることです。いくつかの異なるオプションについては、上記のリンクを参照してください。

8
Matt Coughlin

以下がその方法です。

@media (pointer:none), (pointer:coarse) {
}

https://stackoverflow.com/a/42835826/1365066 に基づく

8
GrayFace

モバイルデバイスを検出しないで、代わりに固定デバイスを探します。

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

多くのモバイルブラウザーはこれをサポートしていないため、すべての場合に一般的なcssコードを記述し、この例外を大画面に使用できます。

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

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

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

7
LGT

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

モバイルデバイスは幅よりも高さが大きく、逆にコンピューターは高さよりも幅が大きくなります。例えば：

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

それは私が推測するすべての幅に対して行われる必要があります。

2
m33x

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

Mozilla/5.0（iPhone; Mac OS XのようなCPU iPhone OS 10_3_2）AppleWebKit/603.2.4（KHTML、Geckoのような）バージョン/10.0 Mobile/14F89 Safari/602.1

この文字列には、iPhoneとモバイルという2つの重要なキーワードが含まれていることに注意してください。私が持っていないデバイスのその他のユーザーエージェント文字列は、次の場所にあります。

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

この文字列を使用して、次のコードを使用して、WebサイトのJavaScriptブール変数bMobileをtrueまたはfalseに設定します。

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 ;
2
Jesse Heines