はじめにいうと、meta要素のviewportは以下の記述がスタンダードであることに変わりはないと思います。
<meta name="viewport" content="width=device-width,initial-scale=1">ただ、viewportについて、改めてなんでこの記述はなんだろうと考えてみた内容になります。
viewportとはそもそも何なのか
~スマートフォンの登場 2007年~
viewportとは、ブラウザの「表示領域」のことです。
ではどこから出てきたのか?
振り返るとスマートフォンが登場して、
パソコンよりも小さいブラウザでWEBページを見る機会ができました。
当時はレスポンシブサイトというものもなく、iPhoneが出た2007年あたりは、
PCのディスプレイサイズの多くが1024x768pxの時代です。
当時のスマホのディスプレイサイズが320pxです。
（分かりやすくiPhoneを基準としています）
PCの1024px幅のサイトを普通にスマホ320px内に表示させると、1/3くらいは見えなくなってしまいます。
そこで、viewportという設定で表示サイズを変えて全部が見えるようにする必要がありました。
スマホでviewportを設定しない場合は、
スマホの横幅を980px扱いで表示するというのがデフォルトになっています。
※viewportを設定しない場合と
<meta name="viewport" content="width=980">は同じ表示になります。
では、なんで980pxだったのでしょう。
viewportのデフォルトの幅はなぜ980pxか
繰り返しになりますが、当時（2007年くらい）はPCのディスプレイサイズの多くが1024x768pxの時代です。
※2009年からしか見れなかったので若干年代が違いますが参考まで
--------------------------------------------------------
参考：Stat Counter
--------------------------------------------------------
また、WEBデザインは「960 Grid System」というのもあり、
横幅960px前後のサイトが多かったという印象です。
--------------------------------------------------------
参考：960 GRID SYSTEM
--------------------------------------------------------
「960 Grid System」は実際のコンテンツの幅は940px
要素間の余白が20pxあり、左右に余白が10pxづつあります。
要素間の余白は20pxで、左右の余白が10px。
これに左右にもう10pxづつ足すと全部の余白が20pxになって見やすくなる。
となると
960px + 左右の余白の追加分20px =980px
<meta name="viewport" content="width=980">viewportのデフォルトの幅が980pxなので、この考え方で出てきた数字なのかなと思いました。
こちらも当時話題になった記事で参考まで。
--------------------------------------------------------
参考：デザインは8の倍数でできている
--------------------------------------------------------
viewportの役割
~PCサイトからスマホサイトへ 2010年~
2010年にiPhone4が登場して、このあたりから、
スマホサイトという概念が出はじめてきたと思います。
私の印象だと、iPhone4以前はスマホサイトというのはあまりなくて、
PCのサイトで当時はレスポンシブサイトなどはなく、固定幅のサイトが主流でした。
スマホで見てもPCサイトが縮小されて表示され、
小さくて見えないので、拡大して見ていました。
スマホの画面だと、先程のviewportの設定もされていないので、
下の図のようにPCサイトの表示がそのまま縮小されて、
スマホブラウザの横幅が980pxと認識されて表示されます。
スマホの実際の表示サイズは375pxですが、その中に980pxサイズのものが入っています。
※viewportを記述しない設定は以下と同じ扱いになります。
<meta name="viewport" content="width=980">徐々にスマホサイトが登場し始めると、
今となってはおなじみの下記のviewportの記述が定番となっていきます。
<meta name="viewport" content="width=device-width,initial-scale=1">
※viewportをwidth=device-widthにすることで、
デバイス幅に合わせた表示ができるようになります。
それぞれの意味は、
・width=device-width ＝ デバイス幅に合わせる
・initial-scale=1 初期倍率
・user-scalable=yes ユーザの拡大表示の可否
となっています。
まとめると
・スマホがない時代は、WEBサイトはデスクトップのモニタで見るだけだった（大体1024x768px）。
その時のWEBサイトは横幅が980pxサイズの固定幅のが主流だった。
・スマホの登場で、小さい画面で見る機会ができた。
スマホの画面を擬似的に980pxにする仕組みをつければ、はみ出さずに見えるようになると考えた。
・その後、PCサイトとスマホサイトを別々に作るようになる。
そうなると、擬似的に980pxに表示（縮小表示）する必要がなくなるので、width=device-widthという、
デバイス幅に合わせた等倍表示の設定が主流になる。
・更にその後に、レスポンシブデザインという、
横幅に依存しない可変のデザインに進化していく。
※pxの表記はすべてcssピクセルという表記として書いています。
実際のスマホの画面解像度（デバイスピクセル）も絡めると理解がしにくくなるため、
今回はcssピクセル表記のみでまとめています。
その後の高解像度（Retina）ディスプレイの登場で、
「CSSピクセル」と「デバイスピクセル（画面解像度）」の数字が2倍になり、更に3倍になり、
と複雑さが増していきますが、それはまた今度の機会に。
お知らせ
YouTubeチャンネル「ちいさなデザインの話」を開設しました。
「WEB制作ドキュメント」「10分デザイン考」などデザイン情報を発信していますのでこちらもぜひよろしくお願いいたします。
