JavaScriptでWindowサイズを常に表示する方法

2021/01/04

レスポンシブのコーディングする際、Windowサイズを表示させる方法は色々ありますが、僕はJavaScriptを使っています。
簡単なプログラムで実装出来るのでよろしければお試しください。

Chromeのプラグインなどでも画面サイズを表示するものはありますが、JavaScriptを使えばスマホでも違うブラウザでもなんでも表示できるので手軽だと思います。

以下のタグをすべて</body>タグの前にそのままコピペすれば、Windowサイズが表示されるはずです。

<style>

#window-size {

position: fixed;

bottom: 10px;

left: 10px;

width: 200px;

background-color: #fff;

font-size: 16px;

font-weight: bold;

z-index: 9999;

text-align: center;

padding: 10px;

}

</style>

document.body.insertAdjacentHTML('beforeend', '<div id="window-size"><span id="windowW"></span>px <span id="windowH"></span>px</div>');

function WindowSize(){

var windowW = window.innerWidth;

var windowH = window.innerHeight;

document.getElementById('windowW').textContent = windowW;

document.getElementById('windowH').textContent = windowH;

}

WindowSize();

window.onresize = function(){ WindowSize(); }

</script>

※上手く表示されない場合は他のJavaScriptファイルが原因かもしれません。
※</body>タグの直前に挿入しないと表示されません。