javascript - Foundation 3 で Modernizr を使用して、デバイスが電話かどうかを検出しますか?

Question

Foundation 3 でレスポンシブサイトを構築しています。

残りの 1 つの問題は、ランキング広告です。デスクトップとタブレットにリーダーボード広告を表示する広告スロットを 1 つ用意したいのですが、電話には電話固有の広告を表示します (リーダーボードは明らかに収まらないため)。

Doubleclick (当社の広告ベンダー) と話をしたところ、広告がいずれかの広告呼び出しをロードするポイントでインラインで JavaScript ブラウザースニファーを使用することを提案されました。

Foundation は Modernizr を使用しているため、それを活用して配信する広告を検出する方法を探していました。しかし、そのドキュメントを見ると、何も表示されません。関連するのはタッチだけですが、これにはタブレットが含まれます。電話だけをターゲットにしたい。

Modernizr でこれを行う必要はありますか、それとも navigator.userAgent に頼るべきですか?

score 0 · Accepted Answer

単純なチェックに Modernizr を使用する場合は、Touch サポートをチェックしてください。

if ( Modernizr.touch ) {
   // mobile
} else {
   // desktop
}

もちろん、タッチイベントをサポートしていない携帯電話があるため、これは最も正しい解決策ではありません。モバイルデバイスをより徹底的にチェックしたい場合は、チェックするのが正しい方法だnavigator.userAgentと思います。

score 0 · Accepted Answer

ユーザーエージェントの道をたどるのは、おそらくやり過ぎです。

電話だけをターゲットにしたい

Modernizrs の機能検出を使用しても、携帯電話とタブレットを正確に区別することは頭の痛い問題です。

主要な問題が正しいサイズの広告を表示することである場合、ユーザービューポートを使用して広告サイズを決定しないのはなぜですか?

例えば

if($(window).width() < desktopAdWidth){
      // do mobile ad stuff..
}

score -1 · Accepted Answer

画面サイズとピクセル密度の組み合わせを評価するために Modernizr.mq() を使用しています。ピクセル密度が 1.0 を超えるものはすべてモバイルだと思います。

また、ドキュメントによると、WebOS はタッチを報告しないため、タッチ検出は信頼できません。また、Windows 8 のタッチ対応 PC 上のブラウザーの将来のバージョンでは、タッチの報告が開始されると思われます。

3 に答える 3