スマホ専用サイト、ずっと前から勉強しなきゃなー…と思っていたもののなかなか手を出す機会がなく。
このたび、ようやく作る機会に恵まれたので、色々備忘録的に書いておきます。

もうスマホ専用サイトなんて作んないでしょ～、時代はレスポンシブでしょ～？

はい、そうですよね…。

でもね！
スマホ特有の癖とかさ！
わかってたほうがさ！
後々レスポンシブ作るときも楽じゃんね！ね！！

Map系

Mapはgoogleマップの埋め込みコードでばっちり表示される。
勝手にスマホ用に最適化してくれるぽい。
かんたん。

ホームスクリーン用のアイコンを作成

faviconのスマホ版みたいなのを作る。
大きめのサイズで作っておけば、それが縮小されて使われる。
144×144以上の正方形でPNG形式がよろし。
自分は200×200で作った。
iPhoneアイコンの角丸は自動で設定されるので、正方形にしとくのが色々とめんどくさくない。

んで、下記コードをheaderに貼り付ける。
Linkのhrefはhttp://からのフルパスが吉。

↓ iPhone光沢あり
<link href="http://サイトのURL/favicon.png" rel="apple-touch-icon" />

↓ iPhone光沢なし
<link href="http://サイトのURL/favicon.png" rel="apple-touch-icon-precomposed" />

電話番号をタッチすると自動的に発信可能にする

↓ header内にこれを
<meta name="format-detection" content="telephone=no" />

↓ リンクさせたい電話番号はこれで囲む
<a href="tel:電話番号">電話番号</a>

ページ内スクロール

自作jQueryだとAndoroidでうまく動かないことがあるので、smoothScroll.jsを仕込む。
単独で動く嬉しいjs。
MITライセンスです、開発者様ほんとうにありがとうございます。