レスポンシブサイトでは様々なデバイスやブラウザからアクセスされます。そのため、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要素を除いた実際にウィンドウで利用できるピクセル数になります。
例えば、モニターの解像度が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.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';
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'
});