レスポンシブによるスマホ対応＋広告（グーグルアドセンス）切り替え

スマホ対応の為のレスポンシブWEBデザイン、広告（グーグルアドセンス）切り替え。
自分用メモ

ユーザーエージェント、デバイス種類判定処理

Javascriptでユーザーエージェントを取得し、ユーザーエージェントからデバイス種類を判断。

var isUA = (function(){
	var ua = navigator.userAgent.toLowerCase();
	indexOfKey = function(key){ return (ua.indexOf(key) != -1)? true: false;}

	var o = {};
	o.ie	  = function(){ return indexOfKey("msie"); }
	o.fx	  = function(){ return indexOfKey("firefox"); }
	o.chrome  = function(){ return indexOfKey("chrome"); }
	o.opera   = function(){ return indexOfKey("opera"); }
	o.android = function(){ return indexOfKey("android"); }
	o.androidMob = function(){ return indexOfKey("android") ? ( indexOfKey("mobile") ? true : false ) : false; }
	o.androidTab = function(){ return indexOfKey("android") ? ( !indexOfKey("mobile") ? true : false ) : false; }
	o.android23 = function(){ return indexOfKey("android 2.3."); }
	o.ipad	= function(){ return indexOfKey("ipad"); }
	o.ipod	= function(){ return indexOfKey("ipod"); }
	o.iphone  = function(){ return indexOfKey("iphone"); }
	o.iphoneChrome  = function(){ return indexOfKey("crios"); }
	o.pc = function(){return o.android() === o.iphone() === o.iphoneChrome() === o.ipad() === o.ipod() === false};
	o.tb = function(){return o.androidTab() === true ? true : ( o.ipad() === true ? true : false );};
	o.sp = function(){return o.pc() === true ? false : ( o.tb() === true ? false : true )};
	return o;
})();

画面サイズごとのスタイルシート

CSSのMedia Queriesを利用して画面サイズによって読み込む適用するスタイルシートを切り替える。
画面サイズごとのスタイルシートを用意して、表示しない方のdiv要素をdisplay: none;に指定。
スマホ・タブレット用には３パターン用意。
PCはmain-css.cssを参照

style.css

@import url("css/main-css.css");
@import url("css/768.css");
@import url("css/320.css");
@import url("css/480.css");

320.css

@media only screen and (max-width: 480px) , screen and (max-device-width: 480px) {


.pc-ads {
   display: none;
}
.sp-ads {
  display: block;
}

}

480.css

@media only screen and (min-width: 480px) and (max-width: 767px) {

.pc-ads {
   display: none;
}
.sp-ads {
  display: block;
}

}

768.css

@media only screen and (min-width: 768px) and (max-width: 959px) {

.pc-ads {
  display: block;
}
.sp-ads {
   display: none;
}

}

main-css.css

.pc-ads {
  display: block;
}
.sp-ads {
   display: none;
}

広告コード（PCとスマホで切り替え）

貼り付けるアドセンスコードは同期処理。
アドセンスコード生成時に設定。
google_ad_width（横サイズ）、google_ad_height（縦サイズ）はページに併せて調整。
isUA.pc()、isUA.tb()、isUA.sp()で画面サイズに応じてアドセンスのコード実行制御をしている。

<div class="pc-ads">
	<script type="text/javascript">
	    google_ad_client = "*********************";
	    google_ad_slot = "**********";
	    google_ad_width = 640;
	    google_ad_height = 90;
	</script>
	<script>if(isUA.pc() || isUA.tb())document.write('<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');</script>
</div>
<div class="sp-ads">
	<script type="text/javascript">
	    google_ad_client = "*********************";
	    google_ad_slot = "**********";
	    google_ad_width = 280;
	    google_ad_height = 90;
	</script>
	<script>if(isUA.sp())document.write('<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"><\/script>');</script>
</div>

今回はこれでレスポンシブ対応できたけど、
もっと確実にレスポンシブ対応するなら
Javascriptの
$(window).resize(function()
で画面サイズが変更された時にも自動デザイン調整をする処理が必要かも。