Tweet

Pocket

スマートフォン対応のページを作成する際にまず気を付けなければならないのが画面サイズです。
通常のPCサイトをスマートフォンで表示させると、サイト幅が画面内に収まるように表示されるので、文字が非常に小さくなってしまい拡大しないと読むのが難しい状態で表示されます。
ページの全体像が見れるので、PCサイトの表示はこれで問題ないでしょうが、スマートフォン用に作ったページまで文字が小さくなってしまっては困りますので、スマートフォン用のページにはあるコードを記述しておきます。

それは、meta要素でviewportという値を設定します。
viewportを設定すると、各端末の画面に合わせた幅でページが表示されます。

【使用例】

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">

【viewportで使用できるプロパティ】
width
[意味]･･･横幅
[範囲]･･･200から10000px
[デフォルト値]･･･980px

height
[意味]･･･縦幅
[範囲]･･･223から10000px
[デフォルト値]･･980px

inital-scale
[意味]･･･初回アクセス時の拡大率
[範囲]･･･minimum-scaleとmaximum-scaleの間
[デフォルト値]･･･1

user-scalable
[意味]･･･ユーザーによる拡大縮小操作の許可
[範囲]･･･yes / no
[デフォルト値]･･･yes

minimum-scale
[意味]･･･拡大率の下限
[範囲]･･･0から10.0
[デフォルト値]･･･0.25

maximum-scale
[意味]･･･拡大率の上限
[範囲]･･･0から10.0
[デフォルト値]･･･10.0

スマートフォン用のページを作成するときは必ずviewportの設定を入れましょう。