div に CSS スタイルを適用したいのですが、Chrome for Desktop と Android Navigator を認識する方法がわかりません。
.myDIV{
[if CHROME???] width: 280px;
[if ANDROID???] width: 100%;
}
CSS から chrome または android ナビゲーターを検出する方法はありますか?
div に CSS スタイルを適用したいのですが、Chrome for Desktop と Android Navigator を認識する方法がわかりません。
.myDIV{
[if CHROME???] width: 280px;
[if ANDROID???] width: 100%;
}
CSS から chrome または android ナビゲーターを検出する方法はありますか?
私が間違っている可能性もありますが、ブラウザー エージェントをスニッフィングしてから本体にクラスを追加するだけだったと思います。
Android をチェックしないでください (CSS ではできません) - Media Queriesを使用して画面サイズをチェックします。これは、特定の名前の付いたブラウザーをチェックするよりもはるかに優れており、さまざまなサイズでデザインを機能させるために使用されるレスポンシブ デザインとして知られています。
.myDiv { width: 280px; }
@media screen and (max-width: 699px) {
.myDiv { width: 100%; }
}
古い Android 用の CSS 固有のハックはありませんが、iPad/iPhone (任意の iOS デバイス) を除外する方法を見つけました。これは、「超高解像度」以外の古いデバイスでは機能しませんが、最新のほぼすべてのデバイスで機能するはずです。
使用方法:
/* Modern Androids (For Android 4.0+, Chrome 15+, Safari 5.1+, and Opera 14+) */
_:-webkit-full-screen, :root .selector { color:blue; }
私のライブCSSハックテストページでテストしてください:
http://browserstrangeness.bitbucket.io/css_hacks.html#webkitまたは http://browserstrangeness.github.io/css_hacks.html#webkit
これが機能する理由は、iOS が Webkit ディストリビューションに含まれている :-webkit-full-screen CSS 疑似クラスをサポートしていないためです。
この投稿の時点で、Safari はバージョン 8 であり、Chrome は最大 41 までの開発/カナリア バージョンです。
楽しみ!