レスポンシブWebデザインとユーザーエージェントスニッフィング

CSS3 mediaクエリ機能は、さまざまな画面サイズとデバイスに適応するWebサイトの開発に関して、多くの興味深い可能性をもたらしました。

ただし、実際には、CSS3 mediaクエリ機能、および「レスポンシブWebデザイン」の全体的な動きが期待どおりに機能しない可能性があるという感覚が得られ始めています。

問題は、結局のところ、Web開発者は、ユーザーがデスクトップ、タブレット、またはモバイルデバイスのいずれでコンテンツを表示しているかにほとんど関心があるということです。ただし、CSS3は画面解像度を検出する手段のみを提供します。理論的には、画面の解像度を検出することは、さまざまなデバイスに合わせて調整するための優れた方法のようです。しかし、実際には...

画面幅を出力するだけの簡単なJavascript関数があるとします。

function foo()
{
   alert(screen.width);
}

私のBlackberry Touchでは、これは以下を出力します：

768

私のサムスンギャラクシーでは、これは出力します：

800

そのため、この時点で、主流のスマートフォンの解像度はデスクトップレベルの解像度にかなり近づいています。ユーザーがスマートフォン、タブレット、またはデスクトップを介してWebサイトを表示しているかどうかを検出する機能は、画面の解像度だけが問題である場合、ますます困難になるようです。

これは、メディアクエリに基づくCSS3「レスポンシブWebデザイン」の動き全体の背後にある知恵全体に疑問を投げかけます。mediaクエリ機能は、さまざまなモバイルデバイスよりも、デスクトップ画面上のサイズ変更されたブラウザウィンドウへの適応に適しているようです。

モバイルまたはタブレットデバイスを検出するためのもう1つの可能な方法は、ontouchstartイベントがサポートされているかどうかを確認することにより、機能検出を使用することです。しかし、多くのデスクトップ画面がタッチをサポートし始めているため、これでも信頼性が低下しつつあります。

質問：それで... Web開発者として、RWDや機能の検出に頼ることができない場合、モバイルデバイスを検出するためのユーザーエージェントスニッフィング（常に信頼性が低いことで悪名高い）は本当に最適なオプションですか？

特定のデバイスについて心配する必要はありません。

ユーザーがスマートフォン、タブレット、またはデスクトップを介してWebサイトを表示しているかどうかを検出する機能は、画面の解像度だけである場合、ますます困難になるようです。

画面解像度で検出することはますます難しくなり、より多くのデバイスが市場に参入するにつれて難しくなりますが、メディアクエリの目的はデバイスタイプを検出することではありません。現在の寸法で使用するのはもはや快適ではありません。サイトが550ピクセル幅でバラバラになり始めたら、それらのサイズのデバイスが存在するかどうかは関係ありません。そこでブレークポイントを設定します。

機能検出と同じ対処。デバイスがタッチをサポートしている場合、それがモバイルデバイスであるか、将来の壁サイズのモニターであるかは重要ですか？いずれにせよ、タッチの機能強化はおそらく役立つでしょう。

あなたが述べたように、ユーザーエージェントのスニッフィングは完全に信頼できません。本当に必要な場合は、ユーザーエージェント文字列をシェークスピアの引用符に変更することもできます。そのとき、あなたのサイトは私のブラウザについて何を決定しますか？

ユーザーエージェントは、すべての可能性を処理するために多くの作業も必要とします。Android版Firefox向けのものはありますか？IOS上のChrome？アナと雪の女王？WiiUブラウザー？私の古いLGフィーチャーフォンの非常に限られたブラウザーですか？リンクス？IE 13？リンク？IceWeasel？ブラックベリープレイブックのブラウザ？タブレットで動作するOperaと携帯電話で動作するOperaの違いをどのように見ていますか？

このリストは、時間の経過とともに増加します。

ユーザーエージェントも嘘をつきます。Googleを使用すると、ユーザーエージェントと現実のリストを見つけることができます。これが問題です。一部のユーザーは、dpi設定を見て、どのデバイスまたはどのデバイスであるかを判断します。