Edited at

CSSをユーザーエージェントで振り分け(ブラウザとバージョンも細かく)

More than 5 years have passed since last update.


CSSをブラウザごとに細かく切替える

先日、作成中のサイトをスマホ各機種で確認していたところ、AQUOSフォンだけ表示が異なっていた。

viewportでdpiを220に指定した所、他の機種と均衡が取れた。

しかし、それによってブラウザでかなりの表示差異が生まれてしまった。

その為の振り分けです。

もっとイイ方法をご存知の方は教えて頂けるとものすごく助かります。


バージョンで分けた理由。

ちょっとCSSで【 position:fixed 】を使う機会がありました。

古いAndroidではこれ効かないので、これだけの為に分けた感じです。


多分無駄があります。

急いで作ったので無駄が多いです。

素晴らしく簡潔に出来る方がいらっしゃいましたら訂正して頂けると非常に嬉しいです。

(function(){

var _UA = navigator.userAgent;
if (_UA.search('iPhone') > -1 || _UA.search('iPod') > -1) {
document.write('<link rel="stylesheet" href="./css/iphone.css">');
}else if(_UA.search('Android') > -1){
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.search('opera') != -1) {
document.write('<link rel="stylesheet" href="./css/opera.css">');
} else if (userAgent.search('msie') != -1) {
///////////////////Androidバージョン判定/////////////////////////
if( _UA.search(/Android 2.[123]/) != -1 ) {
document.write('<link rel="stylesheet" href="./css/android-23.css">');
}else{
document.write('<link rel="stylesheet" href="./css/android.css">');
}
//////////////////////Androidバージョン判定///////////////////////////
} else if (userAgent.search('chrome') != -1) {
document.write('<link rel="stylesheet" href="./css/chrome.css">');
} else if (userAgent.search('gecko') != -1) {
if (navigator.userAgent.search("Firefox") != -1) {
document.write('<link rel="stylesheet" href="./css/fox.css">');
}else{
/////////////////////////Androidバージョン判定/////////////////////////
if( _UA.search(/Android 2.[123]/) != -1 ) {
document.write('<link rel="stylesheet" href="./css/android-23.css">');
}else{
document.write('<link rel="stylesheet" href="./css/android.css">');
}
/////////////////////////Androidバージョン判定//////////////////////////
}
} else {
document.write('<link rel="stylesheet" href="./css/opera.css">');
}
}else if(_UA.search('iPad') > -1){
document.write('<link rel="stylesheet" href="./css/ipad.css">');
}else{
document.write('<link rel="stylesheet" href="./css/pc.css">');
}
})();

一応、旧operaも分けていますが、現状は意味がありません。

でも一応です。一応…。