web-dev-qa-db-ja.com

ユーザーがモバイルデバイスを使用しているかどうかを判断する最も簡単な方法

ウェブサイトに通知バーを表示していますが、率直に言って、モバイルデバイスではうまく機能しません。デスクトップユーザーのみにバーを表示したいと思います。

ユーザーがデスクトップを使用しているかモバイルを使用しているかを判断する最も簡単な方法は何ですか？

javascriptmobiledesktop
14
RailsTweeter

これを確認してください http://detectmobilebrowsers.com/

Javascript、jQueryなどで動作します。

8
injetkilo

ユーザーエージェントチェックは「最も簡単」ですが、簡単に使用できます CSS3メディアクエリ

これは、iphone、Android、blackberry;他のモバイルブラウザを簡単に追加できることを確認する例です。

var is_mobile = !!navigator.userAgent.match(/iphone|Android|blackberry/ig) || false;
7
Rob M.

特徴検出を使用するのが最善だと思います。 Modernizr を使用して、タッチデバイスかどうかを検出します。次のようなことができます。

var mousedown = 'mousedown';

if (Modernizr.touch) {
    mousedown = 'touchstart';
}

$('.foo').on(mousedown, handleMouseDown);

次に、CSSメディアクエリを使用して画面幅を処理します（JavaScriptを使用して画面幅を検出するのも簡単です）。そうすれば、大画面のタッチデバイス、または小画面の非タッチデバイスを正しく処理できます。

7
Jonathan Potter

modernizr を使用する場合。 「ノータッチ」クラスが要素に追加されます。デフォルトでバーを非表示にし、「no-touch」クラスが存在する場合にバーを表示するcssルールを追加できます。例：

デフォルト：

.bar{display:none;}

デスクトップ：

.no-touch .bar{display:block;}
0
sidarcy

ユーザーがモバイルデバイスを使用している場合、このjavascript'if 'はtrueを返します。

if（navigator.userAgent.indexOf（ 'Mobile'）！== -1）{.。

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

0
Michael Shaw

タッチデバイスと非タッチデバイスを区別する最も簡単な方法は、メディアクエリを使用することです。

1）モバイル/タッチデバイスをターゲットとするCSSは、メディアクエリを使用して記述できます。

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

2）デスクトップ/非タッチデバイス（のみ）を対象とするCSSは、メディアクエリを使用して記述できます。

  @media not all and (pointer: coarse) {}

最新のモバイルデバイスはほとんどありません（例：IOS 10 +、1プラスなど））ホバーが検出されるため、（2）を使用して非タッチデバイスを識別します。

0
Sasi Kumar M