WEB Tips デザイン・コーディング

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

本記事にはプロモーションが含まれている場合があります。

ディスプレイ・ブラウザのサイズとスクロールの取得 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.widthwindow.screen.heightは、実際にユーザーが閲覧しているディスプレイの解像度です。

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

例えば、モニターの解像度が1920x1080で、ブラウザウィンドウのサイズが800x600だった場合、
window.screen.width は1920、window.screen.heightは1080、
window.screen.availWidthは800、window.screen.availHeightは600
となります。

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

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

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

レスポンシブデザインでブラウザのサイズを取得して何か処理をしたい時は、window.innerWidthwindow.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';

window.innerWidthが800、window.innerHeightが600だった場合、#boxはW640px、H360pxになります。

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での方法をまとめています。

スマホ・PCを判別してリダイレクトするまとめ

PC用ページとスマホ用ページが別々に存在する場合、ユーザーエージェントで振り分けるのが一般的です。 .htaccess , JavaScript , PHPでのスマホ・PCの条件分岐をまとめました。 ...

続きを見る

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'
});

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大35%キャッシュバックで月額費用643円&ドメイン永久無料 - 2023年11月28日(月)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF - 2023年11月30日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-,