css - CSS を使用して Android ブラウザーのみを検出する方法はありますか?

Question

CSSを書くためにAndroidブラウザだけを検出するCSSハックはありますか? すべての WebKit ブラウザーではありません — iPhone と Android ブラウザーの一部の要素に対して異なる CSS を記述したいと考えています。

たとえばhttp://paulirish.com/2009/browser-specific-css-hacks/

Android ブラウザー用の CSS ハックが必要です。

Answer 1

あなたが参照したCSSハックは、CSSのバグを悪用して特定のブラウザをターゲットにしています（通常、IE 6などのレガシーブラウザで動作するものを取得するためのハックです）。CSS 自体はブラウザ検出を行うことができません。特に、探している OS 検出を行うことはできません。

あなたの質問に対する私の上記のコメント（やらないでください！）、ユーザーエージェント文字列を取得すると、OSとして「Android」が含まれます：

Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2 – G1 Phone

これが 100% 信頼できるかどうかはわかりません (ただし、すべての Android フォンがそのように報告する必要があります)。これが将来変更されるのを妨げるものは何もありません。Javascriptでこの検出を行い、JS に Android 用のカスタム CSS ファイルをロードさせる (ドキュメントに別のスタイル タグを追加させる) か、サーバー側プログラミング (ASP/PHP など) で検出を行う必要があります。スタイルタグをソースにエコーさせます。

Answer 2

現在のベストプラクティスは、ブラウザ/OSの検出ではなく機能の検出を使用することです。役立つかもしれないModernizrと呼ばれるjavascriptライブラリがあります。CSS3以外のブラウザがやなどの新しいCSS3タグのいくつかに対処できるようにするトリックもあると思いheaderますfooter。