レスポンシブサイトのjsを使ったUA振り分けについての考察2


レスポンシブサイトのjsを使ったUA振り分けについての考察

UA判別について説明していきます。

UA判別の手順

1.ロード時に一回だけ発火させる。
2.bodyが読まれる前にUA判定してmetaタグを書き換える
3.判別用のClassをbodyにaddする
4.ロードされる

ヘッダー内の記述

今回の前提はプラグインを使ってませんが、jqueryのreadyでjquery.depend.jsの$.platform.typeなど、利用するともっと楽です。

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf−8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" id="viewport" content="width=1280">

<script>
//ここへ直に書いてますが、この記述を別ファイルを読む形にしても問題ないです。
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
 return 'sp';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
 return 'tab';
}else{
 return 'pc';
}

if(ua=='sp'){
 document.getElementById('viewport').setAttribute('content','width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no');
}else if(ua=='tab'){
 //タブレット用viewport書き換え

}else{
 //PC用
 //elseは書いたけど、この分岐はわかりやすくするため
}
document.getElementsByClassName('body')[0].setAttribute('class',ua);

</script>
</head>

流れ時には上のようなソースを読み込めば、対応可能です。

あとはbody内のコンテンツをbody.sp,body.pc,body.tabを継承させて
レスポンシブサイトを作る。
下は、スマフォとPCしかない場合の例

media-query使ったレスポンシブの場合
a{
 color:#ff0000;
}

@media all and (max-width: 768px) {
 a{
  color:#ffff00;
  text-decoration: underline;
 }
}
UAを使ったレスポンシブの場合
a{
 color:#ff0000;
}

body.sp a{
  color:#ffff00;
  text-decoration: underline;
}

頭の固い人用の対応

ブラウザ幅で動くようにしたいと言われたら、PCだけwindow.resizeで
対応している画面幅でbodyの判別クラスをつけかけるようにすればいい。
下は、スマフォとPCしかない場合の例

javascript
if(ua=='pc'){
 $(window).on('resize',function(){
   if($(window).width()<769){
    if($('body').hasClass('pc')){
     $('body').removeClass('pc');
     document.getElementById('viewport').setAttribute('content','width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no');
     $('body').addClass('s');
     return;
    }
   }else{
     if($('body').hasClass('sp')){
      $('body').removeClass('s');
      document.getElementById('viewport').setAttribute('content','width=1280');
    $('body').addClass('pc');
   }
  }
 });
}

※概念書いてるだけなので、コピペで使えるか、動作テストはしてないのでそのまま利用する場合は注意