既存のWPサイトをスマホに最適化してみた
今回自分のサイトであるwww.yukiji.netをスマホに対応させてみましたので、手順をメモしておきます。HTMLソースはそのまま利用して、CSSの変更で制作した場合です。
1．ヘッダーにviewport設定
まずはじめにviewportを記述します。ここでスマホから接続したときにどのように表示するかを設定します。今回はデバイスの等倍で表示させて、ピンチでのズームなどを制御しようとすると、以下のようになります。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
2．文字自動調節機能の設定
iPhoneやAndroidでは、縦向きと横向きで文字サイズを自動で調節する機能があり、文字サイズを変えたくない場合はCSSで以下を追記しておきます。
body{ -webkit-text-size-adjust: 100%; }
3．エミューレーター
テスト中に手っ取り早く結果を見たい時にブラウザーのエミュレータを使います。今回はgoogle Chromeのエミュレータを使いました。使い方は「Chromeでスマホ動作確認ができる user agent の使い方」で紹介しました。
4．CSSのメディアクエリ
接続したデバイスの幅によって適用させるCSSを変更することができるメディアクエリを使用します。スマートフォンは320pxから480pxまで、タブレットは481pxから1024pxまでの間で指定しました。CSSファイル内でメディアクエリを直接書くと以下になります。
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
@media only screen and (min-device-width : 481px) and (max-device-width : 1024px){
}
5．CSS初期化
ここでやっとサイトのデザインをいじってきます。ブログのような典型的なデザインだった場合はそんなに変更する場所はありませんでした。やることはまず、メディアクエリ内でフロートでデザインされたものをfloat:noneで フロートを解除して行きます。次に幅が設定されているものはwidth:autoでこちらも初期化して行きます。これだけでほとんど縦に整列されて、あとは微調整するだけです。
5．画像について
デバイス幅以上の画像については{ max-width: 100%; height: auto; }で画面にフィットしてきます。問題はデバイス幅以下の画像です。PCでは問題ないものでもletinaディスプレイに場合は2倍の幅が必要で、150pxの画像をそのままletinaディスプレイで150pxのまま表示させるとぼやけます。なので、150pxで表示させたい場合は300pxと一回り大きいものを用意する必要があります。
6．ボタンについて
作っていくとPCのままの高さだとかなり細くなって、親指だとなかなか押しにくい高さになってしまいます。だいたい40px前後の高さがあると良いかなと思いました。
