いろんなことの備忘録

音楽とかwebとか

JSのユーザーエージェント判別によるcss読み込み

スマホだけbodyにパディングをつけたいなど最低限のスマホ対応の場合に便利なJSによるcssの分岐



head内に記述
iphoneipodは iphone.cssを読み込む
androidandroid.cssを読み込む
その他は pc.cssを読み込む

<script>
(function(){
    var _UA = navigator.userAgent;
    if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) {
        document.write('<link rel="stylesheet" href="/css/iphone.css">');
    }else if(_UA.indexOf('Android') > -1){
        document.write('<link rel="stylesheet" href="/css/android.css">');
    }else{
        document.write('<link rel="stylesheet" href="/css/pc.css">');
    }
})();
</script>

他にもUAがいっぱいあるので都度追加やまとめて対応
elseを削除してもいろいろいい感じになる

もっと複雑なのはこちらで
JavaScript ユーザエージェント条件分岐便利スニペット