viewportを設定して正しく見えるように整える

viewportを設定して、表示させる画面サイズを決める

GoogleのモバイルフレンドーテストでWebサイトをチェックしたとき、「モバイル用viewportが設定されていません。」なんて文言を見たことはありませんか？
専門用語でわかりませんよね・・・「viewport」という物が設定されていない事はわかりますが、具体的にどうしたらいいのか、この一文だけではわかりません。
もっと他の言い方がないのかとも思ってしまいますが、viewportの設定はとても簡単なので、この表現が一番ストレートで簡潔な表現なのです。

viewportって何？

そもそもviewportとは何でしょうか
viewportとは、日本にすると「表示領域」という言葉がピッタリだと思います。
ちなみにviewportは「ビューポート」と読みます。

Webサイトを表示する画面サイズを正しく設定することで、読みやすく閲覧しやすいサイトになります。
具体的にどうなるかというと・・・

このようになります・・・
設定が正しい場合は、スマートフォンで見ても文字が小さくなりすぎたりしないように表示されていますが、設定がない場合は、Webサイト全体が縮小されて表示されています。なので文字を読もうとすると、拡大して読まなければなりません。

viewportの設定がされていない場合は、スマートフォンの画面幅をPCと同じとして扱ってしまうので、このように閲覧しにくいWebサイトになってしまいます。
ブラウザは指示をしないと見やすく表示してくれないので、都度こちらの意図を伝えるように設定を変更してください。

では具体的にどうするのか

viewportを正しく設定する必要があることは分かりましたが、具体的にはどうしたら解決できるのでしょうか・・・
実はなにも難しいことはありません。
head要素内に
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
と記述すればそれで完了です。

スマートフォンは画面幅が様々なものがありますよね。どこで対応しているのかというと
width=device-widthの部分です。表示している端末の幅を取得して、その値を基に設定してくれます。
ちなみにinitial-scaleは初期のズーム倍率、minimum-scaleは最小倍率です。
この記述では、表示する端末の幅に基づいて表示領域を定め、拡大も縮小もされていない状態で表示、拡大縮小の操作をした時に、1倍以下に縮小できないように設定がされます。

時々拡大ができないWebサイトを見かけますが、その場合はuser-scalableを使い、拡大を許可する場合は「yes」、拒否する場合は「no」としてあげる事で設定ができます。
何も記述がなければ拡大の許可がされている状態になります。

PC・スマートフォンページを作り分けた場合

注意してほしいのは、PC・スマートフォンページをそれぞれ用意している場合です。
スマートフォンページの場合は、先ほどのviewportを正しく設定しておく必要がありますが、PCページの場合は設定しなくていいかと思います。
それは、わざわざPCページをスマートフォンで表示させるという場面を想像すると分かりやすいかと思います。
実際にスマートフォンで拡大されたPCページを操作するのは大変です。
全体像が見えていないので、どの部分を見ているのか迷子になってしまいそうになるので、全体像を見せ、必要な場所を拡大表示してもらうような操作の方が閲覧しやすくなります。

レスポンシブWEBデザインの場合

この場合もviewportを設定しましょう。

ただし問題がひとつ。
PC・スマートフォンで同一のHTMLを見るので、どちらも同じviewportを使う事になります。
となると、スマートフォンでPCレイアウトを表示させたいと思っても、上手く表示できません。
「width=device-width」という値を使っていると、見ている人の端末のサイズに合わせてレイアウトが変わってしまうからですね。
これに対処するには、「width=device-width」ではなく、「content=”width=1100″」などと、Webサイトの最小幅の値が入るように設定しなければなりません。

でも同じHTMLを使っているので、そのままでは切り替えができません。
なのでJavaScriptを使って、viewportを切り替える方法を採ります。
PCレイアウトを表示させるボタンを押したとき、viewportをPC用に切り替え、スマートフォンレイアウトを表示させるボタンを押したときには戻してあげます。
これで解決できそうですね。

viewportを設定後に起こる問題

PC向けWebサイトにviewportを設定しただけでは、モバイル対応が完了しません。
今度はコンテンツが画面幅から飛び出すという問題が発生してしまうからです・・・

viewportは表示領域を設定して、コンテンツが見やすいように拡大している状態です。
なのでこのように右側に隠れたコンテンツが出来てしまいます。

これでは閲覧しにくいですよね。
右側の部分を見ようと思うと、画面を操作していかなければ見る事ができません。
これに対応するためにもスマートフォン用にレイアウトを変えてあげる必要があります。

そこで専用にページを作成する、レスポンシブWEBデザインにして、表示幅に合わせてCSSを切り替えながら画面幅に対応するという手段が必要になるわけです。
この辺りの操作は簡単にはいきません。
専用に用意する場合はもちろん、レスポンシブWEBデザインにする場合にはHTMLの見直しが必要になる場合がほとんどです。かなりの確率で骨組となるHTMLの作る直しが必要になります。

まとめ

モバイル対応するにも一筋縄ではいきません。
ましてやスマートフォンが普及した現代、モバイル対応は必須事項です。
お困りの方は是非ご相談ください。