JavaScriptでWindowサイズを常に表示する方法
レスポンシブのコーディングする際、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>
<script>
document.body.insertAdjacentHTML('beforeend', '<div id="window-size"><span id="windowW"></span>px <span id="windowH"></span>px</div>');
const WindowSize = function (){
let windowW = window.innerWidth;
let windowH = window.innerHeight;
document.getElementById('windowW').textContent = windowW;
document.getElementById('windowH').textContent = windowH;
}
WindowSize();
window.onresize = function(){ WindowSize(); }
</script>
※上手く表示されない場合は他のJavaScriptファイルが原因かもしれません。