0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

小さい画面でclientWidthも100%も100vwもなぜか980pxを取得する時

Posted at

自分用の備忘録です。タイトルの通りです。

結論から

  • metaタグでviewportを指定していないとデフォルト値の980pxを取得する
  • viewportを指定すれば正常にCSSの値を取得できる

<meta name="viewport" content="width=device-width">

実際に発生した状況

  • 幅をcssで100vw、高さを100vhとして画面サイズに合わせたdiv要素を用意
  • その要素の中でcanvasをセンタリングしたい
  • 画面サイズの縦横比とcanvasの縦横比に合わせ、一番大きくなるようにリサイズする
  • Chromeのデベロッパーツールでサイズをレスポンシブにして画面を小さくする
  • 正常な表示にならず、やたら拡大される
  • viewportを設定したら極小画面でもそれに合わせて最大化された
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?