JavaScript

データ取得

ブラウザのサイズ取得

更新日：2024-03-28

＞ブラウザ全体サイズ
【動作サンプル】
＞ブラウザのビューポートサイズ（スクロールバー含む）
【動作サンプル】
＞ブラウザのビューポートサイズ（スクロールバー含まない）
【動作サンプル】

◆ブラウザ全体サイズの取得

window.outerWidth//ブラウザ全体の横幅

window.outerHeight//ブラウザ全体の高さ

ブラウザ全体のサイズを取得します。
ブラウザのメニューバーやアドレスバーも含んだサイズになります。

コード例

JavaScript

//ブラウザ全体の横幅
let brows_width = window.outerWidth;

//ブラウザ全体の高さ
let brows_height = window.outerHeight;

動作サンプル【sample】

コード例 - Sample

HTML

<div class="example">
 <p>ブラウザ全体の横幅 = <span id="example-1"></span></p>
 <p>ブラウザ全体の高さ = <span id="example-2"></span></p>
</div>

JavaScript

<script>
//ブラウザ全体の横幅
let brows_width = window.outerWidth;

//ブラウザ全体の高さ
let brows_height = window.outerHeight;

//表示
document.getElementById('example-1').innerText = brows_width;
document.getElementById('example-2').innerText = brows_height;
</script>

動作例 - Sample

▶結果が表示されます

ブラウザ全体の横幅 = 0

ブラウザ全体の高さ = 0

◆ブラウザのビューポートサイズの取得（スクロールバー含む）

window.innerWidth//ブラウザ（ビューポート）の横幅

window.innerHeight//ブラウザ（ビューポート）の高さ

ブラウザのビューポート（実際に表示されているエリア）のサイズを取得します。
ブラウザのメニューバーやアドレスバーは含まないサイズになります。
スクロールバー含んでいます。

コード例

JavaScript

//ビューポートの横幅
let brows_width = window.innerWidth;

//ビューポートの高さ
let brows_height = window.innerHeight;

動作サンプル【sample】

コード例 - Sample

HTML

<div class="example">
 <p>ビューポートの横幅 = <span id="example-3"></span></p>
 <p>ビューポートの高さ = <span id="example-4"></span></p>
</div>

JavaScript

<script>
//読み込み時の動作用
initBrowserSize();

//リサイズ用イベントリスナー
window.addEventListener('resize', function(){
 initBrowserSize();
});

//表示用関数
function initBrowserSize(){
 //ビューポートの横幅
 let brows_view_width = window.innerWidth;

 //ビューポートの高さ
 let brows_view_height = window.innerHeight;

 //表示
 document.getElementById('example-3').innerText = brows_view_width;
 document.getElementById('example-4').innerText = brows_view_height;
}
</script>

動作例 - Sample

▶結果が表示されます ▶スクロールバー含みます

ビューポートの横幅 = 0

ビューポートの高さ = 0

◆ブラウザのビューポートサイズの取得（スクロールバー含まない）

document.documentElement.clientWidth//ブラウザ（ビューポート）の横幅

document.documentElement.clientHeight//ブラウザ（ビューポート）の高さ

ブラウザのビューポート（実際に表示されているエリア）のサイズを取得します。
ブラウザのメニューバーやアドレスバーは含まないサイズになります。
スクロールバーも含んでいません。

これまでと違い「window」部分が「document.documentElement」になっているのは、取得対象をhtml内に絞っている為です。

コード例

JavaScript

//ブラウザ（ビューポート）の横幅
let brows_width = document.documentElement.clientWidth;

//ブラウザ（ビューポート）の高さ
let brows_height = document.documentElement.clientHeight;

動作サンプル【sample】

コード例 - Sample

HTML

<div class="example">
 <p>ビューポートの横幅 = <span id="example-5"></span></p>
 <p>ビューポートの高さ = <span id="example-6"></span></p>
</div>

CSS

▶スクロールバーを含む・含まないを分かり易くするためcssでx軸スクロールバーを表示させます

<style>
body{
 overflow-x:scroll;
}
</style>

JavaScript

<script>
//読み込み時の動作用
initBrowserSize2();

//リサイズ用イベントリスナー
window.addEventListener('resize', function(){
 initBrowserSize2();
});

//表示用関数
function initBrowserSize2(){
 //ビューポートの横幅
 let brows_view2_width = document.documentElement.clientWidth;

 //ビューポートの高さ
 let brows_view2_height = document.documentElement.clientHeight;

 //表示
 document.getElementById('example-5').innerText = brows_view2_width;
 document.getElementById('example-6').innerText = brows_view2_height;
}
</script>

動作例 - Sample

▶結果が表示されます ▶スクロールバー含みません

ビューポートの横幅 = 0

ビューポートの高さ = 0