レスポンシブサイトの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');
}
}
});
}
※概念書いてるだけなので、コピペで使えるか、動作テストはしてないのでそのまま利用する場合は注意