自分用の備忘録です。タイトルの通りです。
結論から
- metaタグでviewportを指定していないとデフォルト値の980pxを取得する
- viewportを指定すれば正常にCSSの値を取得できる
例
<meta name="viewport" content="width=device-width">
実際に発生した状況
- 幅をcssで100vw、高さを100vhとして画面サイズに合わせたdiv要素を用意
- その要素の中でcanvasをセンタリングしたい
- 画面サイズの縦横比とcanvasの縦横比に合わせ、一番大きくなるようにリサイズする
- Chromeのデベロッパーツールでサイズをレスポンシブにして画面を小さくする
- 正常な表示にならず、やたら拡大される
- viewportを設定したら極小画面でもそれに合わせて最大化された