昨年制作した株式会社シゲンさんの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＆アンドロイドスマホはデバイスサイズ毎にコーディングする方法としました。
完成したサイトはこちら↓
