webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

レスポンシブレイアウトの際のviewportの設定

viewportの設定

実はメディアクエリーのみではスマホの実機で見た際にCSSの切り替えは出来ません
指定したメディアクエリーをスマホでちゃんと対応させるには「viewport」の設定が必要になります。

viewportとは?

viewportとはスマホ独特の指定方法でPCサイトには無かった概念です。簡単に言うとスマホで見た際の「表示領域」を示す記述です。一昔前は「width=320px」や「width=420px」というように固定値を記述していましたが、スマホの画面サイズの種類が多くなった現在では固定値は使わず「width=device-width」というように記述します。device-widthというのはユーザーが見ているデバイスの大きさによって「表示領域」が可変するという事です。「viewport」はHTMLファイルのhead部分に記述します。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

viewportで指定するもの

  • width=device-width(表示領域)
  • initial-scale=1(古いiOSでは、画面を横向きにすると自動でページが拡大される設定になっているが、その自動拡大を防ぐため)
  • user-scalable=no(ユーザーがピンチイン、ピンチアウトで拡大・縮小出来るかの設定。Yes/no or 1/0)