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

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の作る直しが必要になります。