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