ディスプレイ・ブラウザのサイズとスクロールの取得 JavaScript

レスポンシブサイトでは様々なデバイスやブラウザからアクセスされます。そのため、Webサイトが表示される環境に応じて、適切なレイアウトや要素の大きさを設定することが必要です。

JavaScriptを使って閲覧環境に応じて処理を変えたり、表示内容を変えたりしたい時に、ウィンドウやディスプレイ情報を取得する方法と、その活用例について解説します。

JavaScriptで画面の情報を取得する場面

レスポンシブWebデザインの実装

ウィンドウサイズに応じてレイアウトや要素の大きさを変更したい時、JavaScriptで現在のウィンドウサイズを取得し、それに合わせた処理を行うことができます。

スクロール量の取得

スクロールイベントを監視してスクロール量を取得し、ユーザーがどの位置までスクロールしたかを判断して、それに応じた処理を行うことができます。

広告やコンテンツの表示

広告やコンテンツを、ブラウザのサイズやスクロール量に合わせて調整するしたい時。JavaScriptを使用して、現在のウィンドウサイズやスクロール量を取得し、それに合わせた表示を行うことができます。

モニター画面サイズの取得

所謂ディスプレイの解像度を取得するには以下のようになります。

//画面の幅
var screenWidth = window.screen.width;
//画面の高さ
var screenHeight = window.screen.height;
//タスクバーなどを含めず、利用可能な画面の幅
var screenWidth = window.screen.availWidth;
//タスクバーなどを含めず、利用可能な画面の高さ
var screenHeight = window.screen.availHeight;

window.screen.widthとwindow.screen.heightは、実際にユーザーが閲覧しているディスプレイの解像度です。

window.screen.availWidthとwindow.screen.availHeightは、ツールバーやメニューバーなどのブラウザのUI要素を除いた実際にウィンドウで利用できるピクセル数になります。

ブラウザウィンドウのサイズを取得

//ブラウザ全体の横幅
window.outerWidth
//ブラウザ全体の高さ（タブやブックマークバーなど含む）
window.outerHeight

//ブラウザの表示領域の幅（垂直スクロールバー含む）
window.innerWidth
//ブラウザの表示領域の高さ（水平スクロールバー含む）
window.innerHeight

レスポンシブデザインでブラウザのサイズを取得して何か処理をしたい時は、window.innerWidthとwindow.innerHeightを使用して処理を行うことが多いです。

#boxというdiv要素をブラウザの表示サイズによって大きさを得たい場合

<div id="box"></div>

// ブラウザの表示領域の幅と高さを取得
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;

// 画面幅に合わせて要素のサイズを変更
var box = document.getElementById('box');
box.style.width = (winWidth * 0.8) + 'px';
box.style.height = (winHeight * 0.6) + 'px';

jQueryのwidth()の場合

//スクロールを含まないブラウザ表示領域幅
$(window).width();
//スクロールを含まないブラウザ表示領域高さ
$(window).height();

var winSize = $(window).width();

if(winSize < 768){
//768px未満の処理
}else{
//768px以上の処理
}
 

HTML・ドキュメントのサイズを取得する

//ブラウザ内の表示領域（スクロールバーを除く）
document.documentElement.clientWidth
document.documentElement.clientHeight

//ドキュメントのサイズ（表示されていないところも含めたbodyのサイズ）
document.body.clientWidth
document.body.clientHeight

matchMedia() でウィンドウサイズを判別する

window.matchMedhia()ではスクロールバーを含んだ画面サイズで比較します。

window.matchMedia - MDN

if (window.matchMedia('(min-width:768px)').matches) {
  //768px以上の処理
} else {
  //768px未満の処理
}

画面サイズ、ユーザーエージェントなどでスマホ・PCを判別する方法はこちら

JavaScriptのほか.htaccessでの方法をまとめています。

Windowサイズに合わせて要素の高さを変える

ブラウザウィンドウの高さに合わせて、CSSのheightの値を変更します。

$(document).ready(function () {
  h = $(window).height();
  $('.mybox').css('height', h + 'px');
});
$(window).resize(function () {
  h = $(window).height();
  $('.mybox').css('height', h + 'px');
});

スクロール量の取得

どれだけスクロールをしたかをJavaScriptで取得します。

スクロール量を取得するプロパティ

//水平スクロール
window.scrollX;

//垂直スクロール
window.scrollY

//指定した量だけスクロール（相対的）
window.scrollBy(x, y)

//指定した座標までスクロール
window.scrollTo(x, y)

指定した位置までスクロールするコードサンプル

window.scrollTo({
  top: 100,
  left: 0,
  behavior: 'smooth'
});