web-dev-qa-db-ja.com

Modernizrを使用してタブレットとモバイルをテストする-意見募集

Modernizrを使用して、ユーザーがデスクトップ、タブレット、またはモバイルデバイスのサイトを表示しているかどうかを検出します。

私が最初に最初に考えたのは、モバイルデバイスや大規模なデスクトップに十分な画面サイズを確認することです。画面サイズが小さなデスクトップ画面のサイズ(1024 x 768)に等しくなる可能性があるタブレットデバイスの場合、タッチイベントもテストします。

現時点では、jQuery mobileが言うように、Aグレードのモバイル/タブレットデバイスに焦点を当てたいと思います。特定のモバイルデバイスの機能をタップしてデスクトップ、タブレット、またはモバイルを検出し、テストの結果に応じてCSSクラスを追加することにより、それぞれに合わせたUIを提供することは考えていません。

これは私が望んでいることを達成するのに十分だと思いますか、または他の機能をテストする必要があると思いますか?事前に感謝します。

39
mtwallet

Modernizr タッチイベントを確認できます

デバイスがタブレットであるか、電話であるか、デスクトップであるかをテストするために、おそらくユーザーエージェントを使用することを好みます。 DetectMobileBrowsers.com のスクリプトを見てください

Modernizrは、ブラウザが特定の機能をサポートしているかどうかを単にテストします。私の知る限り、browser_type == mobileおよびこれらのラインに沿ったもの...

最近の多くのデスクトップPCにはタッチスクリーンが搭載されているため、タッチサポートを検出しても、モバイルデバイスまたはタブレットであることは保証されません。

38
Jake Wilson

この質問は少し古いですが、グーグルで検索したとき、より良い答えを見つけることができませんでした。

ほとんどのデスクトップは現在タッチ対応であるため、検出は無関係です。

それらを検出する最良の方法は、画面サイズです。

Modernizrでは、if (Modernizr.mq('only all and (max-width: 480px)')) { ...}を使用できます

46

Modernizrには次の拡張機能を使用できます。 https://www.npmjs.org/package/mobile-detect

または(Modernizrなしで)Restive.JSを使用して、「。phone」または「.tablet」クラスを身体に追加できます。 http://docs.restivejs.com

(ページの下の「formfactor」を探します。)

4
tFranz