レスポンシブ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や機能検出に頼ることができない場合は user-agent sniffing （いつものように信頼性が低いことで悪名高い）モバイルデバイスを検出するための本当に最良のオプション？
特定のデバイスについてそれほど心配する必要はありません。
ユーザーがスマートフォン、タブレット、またはデスクトップのどちらでウェブサイトを表示しているかを検出する機能は、画面の解像度だけでは、ますます困難になっているように見えます
それはis画面解像度を介して検出することがますます難しくなり、より多くのデバイスが市場に参入するにつれて難しくなりますが、メディアクエリの目的はデバイスタイプを検出することではありません。現在の寸法で使用するのが好ましくなくなったときに、設計に微調整を加えています。サイトが幅550pxでバラバラになり始めた場合、それらの寸法のデバイスがあるかどうかは関係ありません。そこにブレークポイントを設定します。
特徴検出についても同様です。デバイスがタッチをサポートしている場合、それがモバイルデバイスであるか、将来の壁サイズのモニターであるかはどうでしょうか。いずれにしても、タッチの機能強化はおそらく役立つでしょう。
ユーザーエージェントのスニッフィングは、既に述べたように、完全に信頼できません。私も本当に望めば、ユーザーエージェント文字列をシェイクスピアの引用符に変更できます。あなたのサイトは私のブラウザについてそれから何を決めるでしょうか？
ユーザーエージェントも、すべての可能性を処理するには多くの作業が必要です。 Android上のFirefox用のものはありますか？ Chromeか、FroyoのDolphinか？WiiUブラウザか？旧式の非常に限られたブラウザLGフィーチャーフォン？Lynx？IE 13？リンク？IceWeasel？ブラックベリープレイブックのブラウザ？Operaタブレットで実行中）とopera電話で実行中）の違いをどのように見分けますか？
このリストは、時間が経過するまで成長できません。
ユーザーエージェントも嘘をつきます。周りをググると、ユーザーエージェントと現実のリストが見つかります。これが問題です。一部のユーザーは、dpi設定を確認して、どのデバイスか、またはどの種類のデバイスかを判断します。