まえがき

皆さん、いきなりですがスマホサイトってどうやって作りますか？
KoToRiは「viewport」をこんな感じで指定して

<meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes">

横幅640pxで作成されたデザインデータを用意してそのままコーディングします！

「viewport」に「initial-scale=0.5」を指定することで横幅640pxでコーディングしたものを50%の大きさで表示することができます。

つまり横幅320px！ちょうどiPhoneのディスプレイの幅のサイズで表示されるわけですね。
この手法だと画像もボケないし楽だし結構ベーシックなやり方だと思います。

ただ、この「viewport」はiPadにも効きます。PCサイトに「initial-scale=0.5」を指定してiPhone用の表示としている場合、iPadで閲覧するとめちゃくちゃ小さくなってしまいます。まさに先日KoToRiはこの状況に陥りました。

「しようがない。phpで振り分けよう。」とか思っていたら

拡張子がhtmlだった

既に公開しているページで拡張子を変えてしまうのは気が進みませんでした。ていうか許可が下りませんでした笑

2時間くらい悩んだ末、やっと答えにたどり着きました。

jsで振り分ければいいじゃん

ホントなんで2時間も悩んでたのか分からない。
ということで同じ人が出現しないよう記事にしておきます。

スマートフォンとタブレットでviewportを振り分ける

このコードをhtmlの</head>より前の「viewport」を記述したいところに書きます。

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	    document.write('<meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes">');
	}else{
	    document.write('<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=yes">');
	}
</script>

一応解説入れますと
「iPhone,iPod,Android」の場合は「initial-scale=0.5」の指定
それ以外（つまりタブレット）の場合は「initial-scale=1」の指定
をそれぞれ書き出すスクリプトになっています。
「viewport」の値は各々変更してください。

はい！これだけです笑
難しいことは何一つありません。

まとめ

KoToRiは直ぐにjsで振り分けるという発想が出てこなかったです。
phpはWordPressですごく使用しているので慣れ親しんでいるのです。
しかしjsは、どっかからライブラリを持ってきてちょっとカスタマイズして使ったりしている程度でphpに比べると修行が圧倒的に足りません。

今回はこの差が顕著に出ました。

これからはjsという選択肢もあるのだと頭に刻み込みます。
何の決意表明だよって感じですが笑