ホーム(記事一覧)へ

view portの書き方/レスポンシブ・スマホ対応【コピペでOK】

今どきレスポンシブ・スマホ対応が当たり前。

しかしスマホ対応させるにも方法がわからない?

レスポンシブ・スマホ対応view portの書き方について説明します。

結論:以下のコードをhead内に記述する。

<meta name="viewport" content="width=device-width" />

これがないと、たとえスマホ用のCSSを用意してメディアクエリで切り替えて、パソコン上でスマホ幅にしてOKでも、実機ではスマホ幅に表示されません。

スマホ対応するなら何はともあれ上記viewportをheadタグ内に記述しましょう。

横幅の指定はいらない

content="width=device-width"というのは端末の横幅に合わせるというものです。これは必ず必要です。

content="width=360"というように幅を指定する書き方もあります。しかし、今どきはスマホの幅も多様化され幅の指定が難しくなっています。また、この指定をした場合タブレット版では非常に大きく拡大され、かえって見づらくなります。

拡大・縮小の設定はいらない

viewportでは以下の設定も可能です。

minimum-scale(最小倍率)
maximum-scale (最大倍率)
user-scalable=no(拡大させない)

上記の通り拡大・縮小の指定もできるのですが、拡大・縮小はユーザーの自由です。指定はしないことをオススメします。

50代ほどになると老眼になり小さい文字がみづらくなりますし、パソコン用に作られた画像がスマホでは縮小されていたら拡大して見たい場合だってあります。

拡大したいのに拡大できないのはユーザーからすると大きなストレスとなります。

よほどの理由がない限り拡大・縮小は設定せず自由にするべきでしょう。

倍率の設定はいらない

initial-scale=1を指定すると倍率を設定できます。
しかし、あってもなくても結果は同じです。不要なコードはないに限ります。

なお、ユーザーエージェントで切り替えていてパソコンで両方を確認する、という特殊な場合は意味があったりします。

しかし今どきはブラウザ幅で切り替える方法が一般的ですのでやはりいらないでしょう。

まとめ

以下のコードをhead内に記述する。

<meta name="viewport" content="width=device-width" />

ただし、viewportを設定しただけで勝手にスマホ化してくれるわけではありません。スマホ用、パソコン用のCSSを用意する必要があります。

以下の記事も参考にスマホ対応させてください。

レスポンシブ・スマホ対応させる「メディアクエリ」の使い方

PCでスマホ画面を表示する方法

以上、レスポンシブ・スマホ対応view portの書き方でした。

関連記事