WordPressでレスポンシブタイプのテーマのCSS編集をしている時、現在のウィンドウサイズを確認するために、Media Queries のブレイクポイント前後でブラウザ機能の「要素を調査」や「Firebug」などを使っていたのですが、複数の幅をリアルタイムに一度にチェックできたらいいなと思っていました。

そこで、現在の画面サイズを動的に表示する簡単なスクリプトを作りましたので紹介します。

動作サンプル

ブラウザの画面を横へ大きくしたり小さくしたりすると数値が変わります。

window

　

スポンサードリンク

　

jQueryコードを設置

以下のコードを header.php の 一番下に張り付けてください。
ウィジェットの「テキスト(任意のテキストや HTML)」に張り付けても動作します。

<div class="window_size">window</div>
<script type="text/javascript">
	/**
	 * 現在のウィンドウサイズを表示する
	 *
	 * License: GPLv2 or later
	 */
	jQuery(window).on('load resize', function(){
		var w_window = window.innerWidth;
		var p_window = jQuery('#primary').outerWidth();
		var s_window = jQuery('#secondary').outerWidth();
		jQuery('.window_size').each(function(){
			var txt = jQuery(this).html();
			jQuery(this).html(
			txt.replace( txt ,
				'window：'           + w_window + 'px' + 
				'<br />#primary：'   + p_window + 'px' + 
				'<br />#secondary：' + s_window + 'px')
			);
		});
	});
</script>

※#primary、#secondary は２カラムのメインの部分とサイドバーの部分です。テーマに合わせて変更してください。
※設置場所は header.php でなくてもいいです。必要なテンプレートに張り付けてもいいです。

CSS編集が終わりましたらこのコードを消してください。(消し忘れのないように)

　

備考

幅の取得は以下の種類がありますので変更する場合は見たいものを使用してください。

outerWidth(true)	marginの外側までのサイズを取得する
outerWidth()	borderの外側からのサイズ　(marginは含まない)
innerWidth()	borderの内側からのサイズ　(paddingを含める)

静的ページでも使いたい場合はコードの「jQuery」を「$」に置き換えたら(７ヶ所 )使えると思います。

　

現在、WordPress4.4で実装されると言われている TwentySixteen を このスクリプトを使って不動産プラグイン用に CSSを修正しています。
元のCSSではブレイクポイントの単位が em だったのですが、実際のブレイクポイントが px で解るのでとてもはかどりますょ。