コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

CSSだけでスクリーンサイズを取得する裏ワザ

Get The Screen Width & Height Without JavaScript

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。


Javascriptを使わずCSSだけでスクリーンサイズを取得する方法です。 @propertyと三角関数を使用します。

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w),1px)); /* screen width */
  --h: tan(atan2(var(--_h),1px)); /* screen height*/
  /* The result is an integer without unit  */
}

たったこれだけ! 取得したwidthとheightはvar(--w)var(--h)とCSS Variablesで使用できます。

©コハム