検証機
by: KawaPosted on:

JavaScriptでユーザーエージェントを判別

Twitter、Facebookをフォローしている人はお分かりだと思いますが、今日は一日中iOSとAndroidの対応に追われていました。

そこでイロイロと勉強になったのでメモエントリ。

まずはiOSとAndroidをユーザーエージェント判別して、それぞれを違ったCSSで制御するというもの。
ユーザーエージェントの判別はサーバでやってもいいんですが、今回は手っ取り早くJavaScriptでやってみました。
別々のCSSと言っても大きく変えることは少なくて、一部だけ微妙にCSSを変えたい事が多いので、ユーザーエージェントを判定してbodyにclassを設定して対応。

$(function(){
	var agent = navigator.userAgent,ua = '';
	if(agent.search(/iPhone/) != -1){
		ua = 'ios'
	}else if(agent.search(/iPad/) != -1){
		ua = 'ios'
	}else if(agent.search(/Safari/) != -1){
		ua = 'safari'
	}else if(agent.search(/Android/) != -1){
		ua = 'android'
	}else if(agent.search(/MSIE/) != -1){
		ua = 'ie'
	}
	if(ua) document.querySelector('body').setAttribute('class',ua)
})();

実際、今回の案件で使ったのはiOSとAndroidの判別だけだったのですが、Safari、IEも判別できればもうちょっと便利かなと。
それ以外はここを見て共通ワードを見つけて書き換えればいろいろ対応できると思います。

これで<body>が<body class=”ios”>のように追加されるので、それに応じてCSSを書けばOK。
それにしても検証機が多すぎてメンドクサすぎる･･･。

コメントを残す