CSSピクセルの確認

CSSピクセルとは何か

CSSピクセルは、ブラウザが扱う論理的なピクセルです。
CSS（カスケーディング・スタイル・シート）で指定されたピクセルは、CSSピクセルに基づいて表示されます。
したがって、WebデザインにおいてはCSSピクセルが重要です。

なお、CSSプロパティとCSSメディアクエリでは、対象領域が異なります。
なので、基準となるCSSピクセルも異なります。
具体的には、CSSプロパティはHTML要素が対象ですが、CSSメディアクエリはメディアが対象です。
ちなみに、ここでのメディアとは、デバイスやブラウザのことです。
つまり、CSSプロパティは表示領域のCSSピクセルが基準で、CSSメディアクエリはメディアのCSSピクセルが基準です。
両者の主な違いは、スクロールバーを含めるかどうかです。（一般的に17pxの差）
スマホでは同じ値になることが多いです。

デバイスの論理ピクセルをCSSピクセルとして説明しているサイトもありますが、ここではCSSピクセルはあくまでもCSSに関するものとして定義しています。

CSSピクセルの取得

CSSピクセルを取得するにはいくつかの方法がありますが、ブラウザの開発者ツールを使うか、JavaScriptを使うのが手っ取り早いです。
冒頭の数値も、JavaScriptを使ってCSSピクセルを取得、表示したものです。

ここでは、表示領域のCSSピクセルの幅・高さをそれぞれ、

• document.documentElement.clientWidth
• document.documentElement.clientHeight

としています。

また、メディアのCSSピクセルの幅・高さをそれぞれ、

• window.innerWidth
• window.innerHeight

としています。

ちなみにスマートフォンの場合、document.documentElement.clientHeight はブラウザのメニューバーが表示されていなくても、表示されているものとして計算されます。
つまり、document.documentElement.clientHeight はメニューバーが表示されていようといまいと同じ値に切り下げられ、実際の表示領域とは異なる場合があります。
メニューバーの表示状態を考慮したCSSピクセルを取得するには、window.innerHeight を使います。