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