Get the screen width & height without JavaScript

July 16, 2024 Get the screen width and height as pixel values using a simple CSS code. Unitless values so you can easily use them inside any formula Updates on screen resize (No need for JavaScript) :root { --w: calc(100vw/1px); /* screen width */ --h: calc(100vh/1px); /* screen height */ /* The result is an integer without a unit! */ } Resize the demo below to see how the values update in real-ti

[stakaya]

CSSのみで画面サイズを取得する

[habarhaba]

たしかにtanと逆関数のatan2があるので、100vhだとか100vwの近似値が得られる

[mohri]

おもしろい。CSSでは100vhが何ピクセルなのか分からないけど、底辺1pxで対辺100vhの直角三角形を想定してarctanで斜辺の角度を求めてそのtanを取れば結果がピクセル数で返ってくる（であってる？？）

[yarumato]

“@property、tan()、atan()”