viewportとは検索🔍

参考

• 実践！スマホサイトのviewport設定 – viewportとはなにか？ | CodeGrid
• もう逃げない。HTMLのviewportをちゃんと理解する – Qiita
• スマートフォンサイトのviewport設定でピンチがピンチ | web helog – HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。
• https://www.tumblr.com/login
• HTML5/ページ全般/meta要素 表示領域を設定する – TAG index

まず、viewportとはなにか？ viewportは、webページの表示領域をどうするかを決めるコードです。 viewportにはどのような種類があるのか？
属性 値
任意属性
name=”” 文書情報の種類 viewport 表示領域の設定
任意属性（name を指定している場合は必須）
content=”” 文書情報の内容 プロパティ=値 プロパティと値を指定
参考
HTML5/ページ全般/meta要素 表示領域を設定する – TAG index
例えば、下記のコードの意味は…
1

HTMLのhead内にのmeta要素の1つとして記述することを宣言する
name=”viewport”とすることで、表示領域の設定をしますよと宣言するv
content=”” を宣言することで、表示領域の設定をどうするべきかを記述する
content属性の値には、以下のプロパティを指定することができます。
プロパティ 値
width= 表示領域の幅 数値 ピクセル数 （200〜10000 の範囲、初期値は 980）
device-width 端末画面の幅に合わせる
height= 表示領域の高さ 数値 ピクセル数 （233〜10000 の範囲、初期値は自動）v
device-height 端末画面の高さに合わせる
initial-scale= 初期のズーム倍率 数値 倍率 （minimum-scale〜maximum-scale の範囲）
minimum-scale= 最小倍率 数値 倍率 （0〜10 の範囲、初期値は 0.25）
maximum-scale= 最大倍率 数値 倍率 （0〜10 の範囲、初期値は 1.6）
user-scalable= ズームの操作 yes 許可する （初期値）
no 許可しない
補足
width=device-width：サイトのサイズをデバイスの横幅に、横スクロールが表示されない程度にフィットさせて表示するという設定
width=device-width は、デバイスごとに固定された幅の値です。なので、iPhone5なら横向きでも縦向きでもdevice-widthは320px、iPad1~2なら768px。viewportにwidth=device-widthってセットするということは、そのデバイスを本来の向きで使ったときの幅に固定するという意味です。 initial-scale=1.0：初期表示時に画面の拡大率を設定します。つまり、初めてのその画面を開いた時のデフォルトの要素の拡大率が100%であることを意味しています
initial-scale=1とした時点で，width=device-widthであると暗黙的に決定される．その逆も同様です
viewportにinitial-scale=1だけ入れると、viewportのwidthが、iPhone5縦向きの場合は320になり、横向きの場合は480になります。initial-scale=0.5とすると、viewportのwidthが縦向きの場合は640になって、横向きの場合は960になります。
引用：SmartAdServer – Blog | Multi-screen and multi-channel advertising is so complicated. Smart AdServer makes it easy.
例えば
initial-scale（初期のズーム倍率）を1.5 と指定した場合は1.5倍に拡大されるので、画面の一部は見えなくなる。つまり、横スクロールできる状態になります。
https://gyazo.com/329883043f06768f876ce4ff675e6425
=========================================================================--

まず、viewportとはなにか？

viewportは、webページの表示領域をどうするかを決めるコードです。<--

viewportにはどのような種類があるのか？

参考
HTML5/ページ全般/meta要素 表示領域を設定する – TAG index

例えば、下記のコードの意味は…

1. HTMLのhead内にのmeta要素の1つとして記述することを宣言する
2. name=”viewport”とすることで、表示領域の設定をしますよと宣言する
3. content=”” を宣言することで、表示領域の設定をどうするべきかを記述する

content属性の値には、以下のプロパティを指定することができます。

補足

• width=device-width：サイトのサイズをデバイスの横幅に、横スクロールが表示されない程度にフィットさせて表示するという設定
  • width=device-width は、デバイスごとに固定された幅の値です。なので、iPhone5なら横向きでも縦向きでもdevice-widthは320px、iPad1~2なら768px。viewportにwidth=device-widthってセットするということは、そのデバイスを本来の向きで使ったときの幅に固定するという意味です。
• initial-scale=1.0：初期表示時に画面の拡大率を設定します。つまり、初めてのその画面を開いた時のデフォルトの要素の拡大率が100%であることを意味しています
  • initial-scale=1とした時点で，width=device-widthであると暗黙的に決定される．その逆も同様です
  • viewportにinitial-scale=1だけ入れると、viewportのwidthが、iPhone5縦向きの場合は320になり、横向きの場合は480になります。initial-scale=0.5とすると、viewportのwidthが縦向きの場合は640になって、横向きの場合は960になります。

引用：SmartAdServer – Blog | Multi-screen and multi-channel advertising is so complicated. Smart AdServer makes it easy.

例えば

initial-scale（初期のズーム倍率）を1.5 と指定した場合は1.5倍に拡大されるので、画面の一部は見えなくなる。つまり、横スクロールできる状態になります。

実践！スマホサイトのviewport設定 – viewportとはなにか？ | CodeGrid