画面サイズ・モニター解像度・各要素のサイズを確認

レスポンシブにデザインをするとき、ブレークポイントを境に、どのように画面が切り替わるか、実際に画面サイズを伸縮させて確認します。

この時、今のブラウザ画面サイズを表示させておくとブレークポイントでの確認に便利です。

ブラウザ画面サイズ
　
モニター解像度
　

「ブラウザ画面サイズ・モニター解像度」の確認

自分の環境の確認用に使ってます。ブラウザ幅を変えると、サイズ表示が追従します。

コード

このJavaScriptのコードは、実際の開発でよく使います。画面に表示させておくと重宝します。コードを付けておきます。コピペで記事の片隅にお使いください。

ブラウザ画面サイズ　 <span id="size1"></span>
モニター解像度　 <span id="size2"></span>

<div><script>
//読み込み時の表示
window_load();
//ウィンドウサイズ変更時に更新
window.onresize = window_load;
//サイズの表示
function window_load() {
	var mW,mH,m;
	mW = window.innerWidth;
	mH = window.innerHeight;
	m = "横幅 : " + mW + " / 高さ : " + mH;
	document.getElementById("size1").innerHTML = m;

	var wW,wH,w;
	wW = screen.width;
	wH = screen.height;
	w = "横幅 : " + wW + " / 高さ : " + wH;
	document.getElementById("size2").innerHTML = w;
}
</script></div>

このコードは「WordPressの記事内でJavaScriptを使うには？」の方法で呼び出してます。

「各要素のサイズ」を確認

「Page Ruler Redux」Google Chromeの拡張機能

Google Chromeの拡張機能を利用すれば、URLページの各要素のサイズを簡単に確認出来ます。画面幅が変化するとき、要素がレスポンシブに追従します。必要に応じてサイズを微調整します。

例えば、このページのアイキャッチ画像のサイズです。赤枠のところで手軽に確認できます。左からの位置などのチェックできます。