jQueryを使ったブラウザ分岐

browser_check.gif

Windows IE6/7はフォントをpx(ピクセル)指定すると文字のサイズが拡大出来ません。そのため今まではIEでフォントサイズを拡大出来るようにするため次のようにハックを使っていました。


body { font-size: 100%; }
* html body { font-size: 82%; } /* for win ie6 */
*:first-child+html { font-size: 82%; } /* for win ie 7 */
html>/**/body { font-size: 13px; } /* for modern browser */

ところがWIndows IE8がリリースされ、このブラウザも当然のごとくピクセル指定のフォントで文字サイズが変更出来ません。IE7からはページズーム機能が備わっているし、Firefoxも3からはデフォルトではレイアウトごとズームするのでもうフォントの固定をしても良いのでは?と思ったりもします。

JavaScriptが無効の環境ではフォントが固定されてしまいますが、jQueryを使ってブラウザ分岐をすると言うのも一つの手かもしれません。

jQueryのコード

$(function()
{
	if ($.browser.msie && $.browser.version > 6)
	{
		$("body").addClass("overIE6");
	} else if ($.browser.msie && $.browser.version < 7)
	{
		$("body").addClass("underIE6");
	}
});

$.browser.msieの記述はブラウザがIEの場合実行されます。&&でさらに条件を追加します。$.browser.version > 6でIE7以上の場合実行されます。もう一つの条件は$.browser.version < 7でIE6以下の場合実行されます。IE7/8ではbodyに.overIE6と言うクラスを、IE6にはbodyに.underIE6クラスを適用させます。
ちなみに次のような記述で他のブラウザも判別出来ます。
$.browser.opera
$.browser.safari
$.browser.mozilla

CSSコードを次のようにします。

body {
	text-align: center;
	background: #fff;
	font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Osaka, Helvetica, Arial, Verdana, sans-serif;
	font-size: 13px;
}
body.overIE6 {
	font-family: "メイリオ", meiryo, "MS Pゴシック", sans-serif;
	font-size: 82%;
}
body.underIE6 {
	font-family: "MS Pゴシック", sans-serif;
	font-size: 82%;
}

この方法ならばIE7/8でメイリオが入っている環境にメイリオフォントを使うことが出来ます。

JavaScript無効の場合、.overIE6、underIE6は無視されてしまいますが一つの方法として書き留めておきます。