さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】スマートフォン用の画面表示対応

Pocket
LINEで送る

スマートフォン対応のページを作成する際にまず気を付けなければならないのが画面サイズです。
通常の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の設定を入れましょう。

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容