スマホ専用サイト、ずっと前から勉強しなきゃなー…と思っていたもののなかなか手を出す機会がなく。
このたび、ようやく作る機会に恵まれたので、色々備忘録的に書いておきます。
もうスマホ専用サイトなんて作んないでしょ~、時代はレスポンシブでしょ~?
はい、そうですよね…。
でもね!
スマホ特有の癖とかさ!
わかってたほうがさ!
後々レスポンシブ作るときも楽じゃんね!ね!!
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ライセンスです、開発者様ほんとうにありがとうございます。