【JavaScript】innerWidthで画面(ウィンドウサイズ)を取得する

画面(ウィンドウサイズ)を取得する方法。
今回はスマホ用に調べたので、ChromeとSafariとFireFoxが対象。

//ウィンドウ内側の幅を得る
window.innerWidth

【innerWidth使用例】

<script type="text/javascript">
	// ウィンドウ内側の横幅サイズを取得して出力
	document.write(window.innerWidth); 
</script> 

【出力結果】

1920

IEではwindow.innerWidthの定義が異なるので注意!!

ついでにウィンドウサイズを変えた時に、リアルタイムに値が確認できるように出力する。
ウィンドウサイズが変更されたときに発生するイベントハンドラonresizeを使用する。

【innerWidth使用例(リアルタイム出力)】

<!-- ここに変化した横幅サイズを出力 -->
<span id="put_size_w"></span>

<script tyle="text/javascript">
	// ウィンドウ横幅サイズを出力する関数
	function getWindowWidth(){
		var size_w;
		size_w = window.innerWidth;
		
		// 指定idタグ内に値を出力
		document.getElementById("put_size_w").innerHTML = size_w;
	}
	
	//読み込み時に横幅サイズを表示
	getWindowWidth();
	
	//ウィンドウサイズ変更時に横幅サイズを更新
	window.onresize = getWindowWidth;
</script>

innerwidth使用例

<span id=”put_size_w”></span>の中に値が出力されるよ!!

さらにサービスで、横幅の値によって処理をかえるスクリプト
ウィンドウサイズが変更されたときに発生するイベントハンドラonresizeの中で条件分岐する。

【innerWidth使用例(条件分岐用)】

<script type="text/javascript">
	// ウィンドウ横幅サイズを取得する関数
	function getWindowWidth(){
		var size_w;
		size_w = window.innerWidth;
		return size_w;
	}
	
	// onresizeで横幅サイズが変わった時のイベント
	window.onresize = function() {
		var size_w = getWindowWidth();
		document.getElementById("win_size").innerHTML = size_w;
		if(size_w < 700){
			// 横幅が700以上の時の処理
	
		}else{
			// 横幅が700以下の時の処理
	
		}
	}
</script>

window.onresizeを使ってウィンドウサイズが変わった時のイベントを設定できるよ!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>