PCサイトと勝手が違ってややこしい。
アイコンの設定
<link rel="apple-touch-icon-precomposed" href="icon.png" />
スマホのブックマークを登録するときのアイコンの設定。ファビコンみたいなん。
画像のサイズは［57pxx57px］
文字サイズ
html {-webkit-text-size-adjust: 100%}
Chrome系の設定。そのままだとレイアウトが崩れることが多く、100％に設定しておくのが無難らしい。
スマホ用のCSS
共通の「style.css」とPC用の「style-pc.css」とスマホ用の「style-pc.css」を用意して、headに↓を書く。
デイスプレイの大きさでスマホを判断する。
<!--PC用CSS-->
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-pc.css" type="text/css" media="all">
<!--スマホ用CSS-->
<link media="only screen and (max-device-width:480px)" href="<?php bloginfo('template_url'); ?>/style-s.css" type="text/css" rel="stylesheet"/>
<!-- ▲ -->
表示設定
<!-- ▼ viewportの設定。画面拡大可 ▼ --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">