こんにちは。
emiです。
最近のコーディング案件で、
「PCデザインのみでスマホはなしで大丈夫です。」
というものがありました。
デザインによってはレスポンシブに時間がかかるので、
PCのみだとかなり時短になり、
お客さんにとってはコストの削減になります。
ところが、PCデザインを完成させ、
スマホで見たところ、
PCデザインの左上の一部のみ表示されているような状態でした。
現実↑
理想↑
ここで、いろいろ検索し
「viewportの設定を変えないといけない」ということに気づきました。
今まで、レスポンシブデザインでやってきたので、
あまりviewportの設定についてあまり深く考えてこなかったのですが、
今回初めて学んだので、まとめました。
今回実現したいこと
今回実現したいことは、スマホでもPCと同じデザインを表示することです。
小さな画面なので縮小して表示されるはず。
スマホでもPC版と同じデザインにしたい
（PCデザインの２カラムのままで表示したい）↓
結論
結論としては、
viewportの設定が必要になります。
私の場合は、下記コードをheadタグ内に記載しました。
<meta name="viewport" content="width=1100">
上記コード内の
「1100」の数字が今回作成したPCデザインの横幅です。
これでスマホでもPCデザイン全体が表示されます。
結局ズームして見ることにはなると思いますが、
スマホで開いた時にサイトの左上だけ表示されることは防げました。
viewportについて
viewportとは、表示領域のことです。
「画面サイズ」と「viewport」は同じものではありません。
画面サイズはデバイス（PCやスマホなど）によって決まりますが、
viewportはmetaタグによって変更可能です。
例えば、
画面サイズが320px×568pxのスマホでも、
viewportを1000pxなどと指定できます。
画面サイズ320pxのスマホに1000pxの表示領域を指定したので、
1000pxのPCデザインがスマホにギュッと縮小されて表示されます。
- 画面サイズはデバイス（PCやスマホなど）によって決まっている。
- viewportはmetaタグによって変更可能。
レスポンシブwebデザインには必須
レスポンシブデザインの場合は、下記を記載します。
（今までほぼ全部これでした。）
<meta name="viewport" content="width=device-width, initial-scale=1.0">「width=device-width」を設定することで
viewportがいつもデバイスの画面サイズと同じになります。
これによって、メディアクエリで小さい画面用にCSSを指定できるようになります。
メディアクエリは画面サイズではなく、viewportによって指定できるということですね。
（viewportの指定を忘れると、メディアクエリを指定してもききません。）
viewportを設定しなかったらどうなるか？
Googleの説明にもあるように、
meta viewport 要素を指定しない場合は、
モバイルブラウザでも初期値として、パソコン画面の幅
（デバイスによって異なりますが通常はおよそ 980 ピクセル）
となります。
つまり、PCのコーディングがギュッと縮小されてスマホに表示されます。
viewportに任意の値を入れてみる
viewportに例えば900pxと入れる。
<meta name="viewport" content="width=900">すると、画面サイズが900pxの時と同じ表示になります。
つまり、viewportに値を設定することによって、
デバイスの画面サイズに関わらず、
表示領域を指定できます。
写真は、
<meta name="viewport" content="width=1200">の場合です。
参考やメモ
参考動画です。
いつも丁寧でわかりやすい。
consoleでviewportを取得するコード
下記のコードをconsoleに打ち込めば、viewportを取得してくれます。
document.documentElement.clientWidth
viewport320pxを取得できた↓
レスポンシブデザインの勉強から始めると、
画面サイズ＝viewportにするのが当たり前だったので、
改めて知れてよかったです。
