ウィンドウサイズを変更、取得しよう!

ウィンドウサイズを変更、取得しよう!

ウィンドウサイズを変更するには、JavaScriptのwindow.resizeTo(), window.resizeBy()、取得するには、.width(), .height()、.outerWidth(), .outerHeight()を使用します。

ウィンドウサイズを変更するには?

メインウィンドウサイズは変更できない?

セキュリティ上の理由で、メインウィンドウのサイズは変更できません。

ウィンドウサイズの変更は、新しいウィンドウを開いた場合にのみ、可能になります。

また、スマホやタブレット等、ウィンドウを観念できない場合にも、変更は無効になります。

新しいウィンドウを開くには?

let window_opened = null;

$('.open').on('click', function() {
    window_opened = window.open('about:blank', 'タイトル', 'resizable');
});

window.openでリサイズ可能なウィンドウを開くクリックイベントを追加しています。

クリックイベントを使用しているのは、ユーザーの操作によらずにウィンドウを開くと、ポップアップブロックでスクリプトが弾かれる可能性があるからです。

window_opened = window.open('about:blank', 'タイトル', 'resizable');

window.openの第1引数にURL、第2引数にウィンドウのタイトル、第3引数にオプションを入力しています。

‘about:blank’は空白のページを表すURL、’resizable’はウィンドウをリサイズ可能にするオプションです。

window.openは、新しく開いたウィンドウのオブジェクトを返します。

ウィンドウサイズを変更するときには、このオブジェクトを使用するため、変数に代入しています。

let window_opened;

サンプルのwindow_openedは、クリックイベントの外で宣言しています。

これにより、他のイベントのコールバック関数でwindow_openedが使用可能になります。

ウィンドウサイズを指定して変更するには?

window_opened.resizeTo(400, 300);

ウィンドウサイズを指定して変更するには、window.resizeTo()の第1引数に横、第2引数に縦のサイズをピクセル単位で渡します。

サンプルでは、windowにwindow_openedを指定し、横が400px, 縦が300pxのウィンドウサイズに変更しています。

現在のウィンドウサイズを基準にリサイズするには?

window_opened.resizeBy(100, -100);

現在のウィンドウサイズを基準にリサイズするには、window.resizeBy()の第1引数に横、第2引数に縦の長さをピクセル単位で渡します。

サンプルでは、ウィンドウサイズの横を100px長く、縦を100px短くしています。

ウィンドウサイズを取得するには?

表示領域の高さ、幅を取得するには?

let height = $(window).height();
let width = $(window).width();

windowのjQueryオブジェクトを生成し、.height()で高さ、.width()で幅を取得しています。

スクロールバーのサイズを含まないことに注意が必要です。

let height = $(window).innerHeight();
let width = $(window).innerWidth();

.innerHeight(), .innerWidth()でも同一のサイズが取得されます。

スクロールバーのサイズを含めて取得するには?

let height = $(window).outerHeight();
let width = $(window).outerWidth();

.outerHeight()でスクロールバーを含めた高さ、.outerWidth()で幅を取得しています。

let height = window.innerHeight;
let width = window.innerWidth;

window.innerHeight, window.innerWidthでも同一のサイズが取得されます。

ウィンドウ全体の高さ、幅を取得するには?

let height = window.outerHeight;
let width = window.outerWidth;

window.outerHeightでメニューバー等を含めたウィンドウ全体の高さ、window.outerWidthでサイドバー等を含めた幅を取得しています。

ウィンドウサイズで分岐するには?

let width = $(window).width();

if(width < 768) {
    alert('スマートフォン');
} elseif(width < 992) {
    alert('タブレット');
} else {
    alert('PC');
}

ウィンドウの幅で条件分岐し、alert()でアラートを表示しています。

サンプルでは、幅が768px未満ではスマートフォン、992px未満ではタブレット、992px以上ではPCが表示されます。

まとめ

  • ウィンドウサイズを指定して変更するには、window.resizeTo()を使用します。
  • 現在のウィンドウサイズを基準にリサイズするには、window.resizeBy()を使用します。
  • 表示領域の高さ、幅を取得するには、.width(), .height()を使用します。
  • スクロールバーのサイズを含めて取得するには、.outerWidth(), .outerHeight()を使用します。
  • ウィンドウ全体の高さ、幅を取得するには、window.outerHeight, window.outerWidthを使用します。
  • ウィンドウサイズで分岐するには、サイズを取得し、条件分岐を使用します。

入門カテゴリの最新記事