レスポンシブデザインサイトをユーザーエージェントでスマートフォン向けに切り替える方法

スマートフォンやタブレット端末の普及が進み、WEBサイトは様々な画面サイズに対応したデザインが求められるようになりました。比較的画面サイズが大きなタブレット端末に関しては、従来のPC向けサイトでもストレスなく閲覧することができますが、スマートフォンの場合はそうもいきません。

そこでスマートフォン向けに表示を切り替える方法がいろいろ考案されています。
（１）ユーザーエージェントでスマホ専用サイトに飛ばす方法
（２）CMSを使っていればスマホ用テンプレートに切り替える方法
（３）ブラウザの横幅に応じて適用するスタイルを切り替える方法（レスポンシブデザイン）

私は一つのソースで対応できる（３）のレスポンシブデザインが好みなのですが、一括りにスマートフォンといっても多様な画面サイズが存在しているのが実情ですね。また、昨今のモバイル端末は横に傾けると表示されている画面も回転し横幅が変わってしまいます。GALAXY NOTEみたいにスマホとは思えないほど画面の大きな端末、iPad miniのようなスマホとタブレットの中間的なものも存在します。こうなってくるとどの画面サイズからがスマートフォンなのか分からなくなってきます。

なので結局、レスポンシブデザインでもユーザーエージェントで端末を判断しなければならない状況になってしまったわけです。PHPを使う動的ページならユーザーエージェントでソースそのものを書き換えるという方法が使えますが、静的ページの場合はやっぱりjavascriptを使うことになりますね。下記のソースでjavascriptによる表示切り替えが可能になります。

●head内に次のソースを記述します

<meta name="viewport" content="" />
<link type="text/css" rel="alternate" href="sample.css" title="sp" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  var sp = (navigator.userAgent.indexOf('iPhone') != -1 || 
 navigator.userAgent.indexOf('iPod') != -1 || 
 (navigator.userAgent.indexOf('Android') != -1 &&
 navigator.userAgent.indexOf('Mobile') != -1)) ? true : false;

  if(sp){
    $('meta[name=viewport]').attr("content","width=device-width,
 minimum-scale=1.0, maximum-scale=1.0");
    $('link[title=sp]').attr("rel","stylesheet");
  }

});
</script>