スマートフォン対応 METAタグ viewport

昨今は各社ブログシステムにはスマートフォン用のテンプレートに対応しているところがほとんどになりました。

パソコンだけではなくスマートフォンでも見やすいページを自動で生成してくれる。
便利なものです。

大抵、テンプレをいじれるようになっていますので各自確認してみてくださいね。

そしてスマートフォンでも確認してみて好きなテンプレを当ててみたりするのも楽しいですね。

気に入ったデザインなんだけど表示をもう少しいじりたいと思った時に変更してみたい部分を説明します。

METAタグの viewport です。

実際には下記のように書いたりします。

<meta name="viewport" content="width=device-width; initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

テンプレートの上部、METAタグ部分に name="viewport" がなければ追加してみましょう。

スマホでの画面サイズなどを指定できる項目となります。

content 部分で設定できます。

画面幅(width) width=device-width; これで画面に合わせて表示できます。
　もちろん400px; とすると400px固定のサイズになります。

初期のズーム値 initial-scale=1, これで１倍の倍率で表示されます。
　1.5や2、0.5とか指定できます。

最少・最大倍率（1～10倍まで指定可能）
　最少 minimum-scale=1, 最少１倍までということ。 初期値は0.25
　最大 maximum-scale=1, 最大１倍までということ。 初期値は1.6

拡縮設定 user-scalable=no こちらは拡大も縮小も許可しない設定。
　拡大と縮小を許可する場合は yes にする。※初期値はyes

これを組み合わせることによって幾分感じがかわるので好みの形を探してほしい。