レスポンシブ PC&スマホのみの振り分け方法

croitreWordPress, ホームページ制作

神奈川県、東京都の産業廃棄物の収集運搬、中間処理、リサイクルならシゲンへ昨年制作した株式会社シゲンさんのHPは→、ブラウザの幅を狭めていくと、メイン部が小さくなり、それに合わせてカラム数が変わったりするようにコーディングしたのですが・・・。

今回のあらい絹世様のご要望は、PC~タブレットはPC表示。スマートフォンのみスマホ表示になるようにしてほしいとのことでした。
PC用、スマホ用とそれぞれHTMLを用意していた時はこれが普通だったのですが、レスポンシブとなると頭の中が大混乱^^;。

レスポンシブでのPCとスマホの振り分け方法

レスポンシブにする場合、HTMLに

<meta content="initial-scale=1.0; user-scalable=yes" name="viewport"/>

viewportを書くのだと思うのですが、タブレットなどの中サイズのメディアでも100%表示のまま表示したい場合は、これ書いたらダメな訳で・・・、まずはこちらのDesign notes めもるんだ〜様のJavaScriptの振り分けを参考に↓のように書いてみました。

if((navigator.userAgent.indexOf('Android') > 0
 && navigator.userAgent.indexOf('Mobile') == -1) 
|| navigator.userAgent.indexOf('iPad') > 0){
 document.write('<link rel="stylesheet" type="text/css" href="pc.css" media="all">\n');
} else if ((navigator.userAgent.indexOf('iPhone') > 0
 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0
 || (navigator.userAgent.indexOf('Android') > 0
 && navigator.userAgent.indexOf('Mobile') > 0)){
 document.write('<meta name="format-detection" content="telephone=yes">\n');
 document.write('<meta content="initial-scale=1.0; name="viewport"/>\n');
 document.write('<link rel="stylesheet" type="text/css" href="sp.css" media="screen">\n');
}
else {
 document.write('<link rel="stylesheet" type="text/css" href="pc.css" media="all">\n');
}

アンドロイドのタブレット&iPad&PC&その他のデバイスは100%PC表示とし、iPhone&アンドロイドスマホはデバイスサイズ毎にコーディングする方法としました。

完成したサイトはこちら↓
kinuyo