もう逃げない。HTMLのviewportをちゃんと理解する<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
