viewportが理解できなくて泣いた

新しく作成するサイトのページは最初からレスポンシブです。 なぜなら、レスポンシブ対応しているフレームワークを使って作成しますから。 では、すんごく昔に作成したあるwebページの表示をスマホに対応させるにはどうするのが良いのでしょう？ 課題は、「スマホで表示したときに文字が小さすぎて読めない！ので、それを少しでも改善できないか？」です。 プラットフォームは変えずにそのままで！です。さて何ができるでしょうか？ 例えば、bootstrapを後から追加することはできるでしょうか？ PCのブラウザ表示にまで及ぶ影響を考えるととても怖くてそれはできません。 とか考えはじめて、PC表示と同じレイアウトがスマホの狭い画面に縮小されて表示されるのはどうして？ そのことすら、そもそも原理がわかっていないことに気づきました。 レスポンシブなページと一体なにが違うのでしょうか？

どうも、ブラウザのviewportに関連する機能が働いていることがわかりました。 該当のその古いページには、viewportを指定するmetaタグがありません。 どうもこれがページが縮小されて表示される原因のようです。 そのページにviewportの定義を追加すれば表示される文字を大きくすることはできるのでしょうか？ なにはともあれ、viewport設定の動作の理解が必要そうです。からが長かった;;;

viewportっていったい何？を検索すると、沢山の解説がヒットします。 「もう逃げないでちゃんと理解する」のような、なんなら今の自分にぴったりそうな解説もあります。 「たぶんほとんどの人は viewport meta タグの指定をまちがえてる」というビビるページもあります； 一筋縄ではないようです。という解説を読んでいて、ついには思考が停止しました。わから～～～んTT

解説ページの記者が理解しているのは間違いありません。その解説も正しいはずです。 しかし、この件に関して、解説を読んで理解しようとしてますます混乱してしまいました。

<meta name="viewport" content="width=***, initial-scale=**">

このwidthはいったい何の幅を指定しているのでしょう？がよくわかりません。 実際に、widthとscaleをいろいろ変えたテストページをそれぞれ作成して表示してみて試してみませう。

• "width=device-width, initial-scale=1.0" と "width=device-width, initial-scale=0.5" では何が違うのでしょうか？
• "width=600" と "width=600, initial-scale=1.0" では、表示はどう変わるのでしょうか？

そして、そのとき、そのときのviewportの幅はいくつと考えるべきなのでしょうか？