スポンサーリンク

Firefox:現在のウィンドウサイズをリアルタイムで確認したい

この記事は約2分で読めます。

Firefox:現在の画面サイズを確認したい

こんにちは、さち です。

先日、レスポンシブデザイン(ブラウザのウィンドウサイズによって表示が適切に切り替わる)サイトの編集をしていました。

デザイン(CSS)の切り替えが正常に行われるか、ブラウザのウィンドウサイズと比較しながら確認したいんですが、アドオンの追加はなるべくしたくない……。

Firefox には「Web開発ツール」が標準搭載されているので、これを使って実現できないか試してみました。

スポンサーリンク

「Web開発ツール」で実現できる

ここまで、便宜上「ウィンドウサイズ」と書いて来ましたが、知りたいのはウェブページが表示されているエリア「viewport(ビューポート) 」のサイズです。

「Web開発ツール」を使うことで、この「viewport」のサイズをリアルタイムに調べられます。

  1. Ctrl + Shift + I キーを押して「Web開発ツール」を表示。右上の「…(カスタマイズとヘルプ)」→「設定」と進みます(F1 キーを押しても可)。
    Firefox:現在の画面サイズを確認したい
  2. 「ページに定規を表示します」にチェックを入れます。
    Firefox:現在の画面サイズを確認したい
  3. Web開発ツール の右上に L型 の「定規(ルーラー)」アイコンが表示されるので、これをクリック。
    Firefox:現在の画面サイズを確認したい
  4. すると、ウェブページ上に定規(ルーラー)と表示エリアのサイズが表示されます。
    Firefox:現在の画面サイズを確認したい

次回以降、手順「1~2」は不要です。

ウィンドウの大きさを変えると、表示されているサイズの値もリアルタイムで変わります。

表示サイズはスクロールバーを含んだ値

Firefox:現在の画面サイズを確認したい

この機能によって表示されるサイズは「スクロールバー」を含んだ値です。

メディアクエリで指定できる max-width はスクロールバーを含む画面サイズなので、この仕様はレスポンシブデザインのテストに都合がよく便利です。

ちなみに、Firefox のスクロールバーの幅は 17px です。この分を差し引けば、スクロールバーを除いた表示領域のサイズを求められます。

コメント

タイトルとURLをコピーしました