タイトルに横文字ばかりで若干の「ルー語」っぽさが出てしまってますが、先日スマホサイトの構築をしていた時にiPhoneとAndroidでpaddingの数値に誤差が生じてしまい、色々調べてやってみたんですがCSSハックを使うというよりはjavaScriptでユーザーエージェントを取得して読ませるCSSを切り替える。という方法が一番しっくりきましたので、そのやり方+他のAndroidハックの紹介をしようと思います。
まずは配布元サイトからファイルをダウンロードしてきてください。解凍後<head>の中に下記のソースコードを記述します。
<script src="css_browser_selector.js" type="text/javascript"></script>
準備はこれでOKです。あとはアンドロイドで別の記述をしたいセレクターに「.android」を頭につけて記述する。
p{
text-align:right;
}
.android p{
text-align:center;/*for-Android-*/
}
上記の様にCSSを書くとAndroidで観たときだけ<p>タグの中の文字列は中央揃え、それ以外のブラウザやデバイスで閲覧すると右揃えとなります。(※コメントアウトは分かりやすい様に付けているだけなので、無くても問題ありません。)
そして、このスクリプトのすごい所はブラウザの違いだけでなくOSの違いも判別出来るところです。例えばmacのIEやウインドウズのサファリなどの指定も出来てしまうんです。下記の例はウインドウズのサファリでの指定例です。
.win.safari p{
text-align:center;/*for-Windows safari-*/
}
対応OS
・win – Microsoft Windows
・linux – Linux
・mac – Mac OS
・ipod – iPod Touch
・iphone – iPhone
・android – Android
対応ブラウザ
・ie – Internet Explorer (All versions)
・ie8 – Internet Explorer 8.x
・ie7 – Internet Explorer 7.x
・ie6 – Internet Explorer 6.x
・gecko – Mozilla, Firefox (all versions), Camino
・opera – Opera (All versions)
・safari – Safari
・chrome – Google Chrome
これさえあれば、IEだって怖くない!!(笑)。
