レスポンシブにデザインをするとき、ブレークポイントを境に、どのように画面が切り替わるか、実際に画面サイズを伸縮させて確認します。
この時、今のブラウザ画面サイズを表示させておくとブレークポイントでの確認に便利です。
ブラウザ画面サイズモニター解像度
「ブラウザ画面サイズ・モニター解像度」の確認
自分の環境の確認用に使ってます。ブラウザ幅を変えると、サイズ表示が追従します。
コード
この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ページの各要素のサイズを簡単に確認出来ます。画面幅が変化するとき、要素がレスポンシブに追従します。必要に応じてサイズを微調整します。
例えば、このページのアイキャッチ画像のサイズです。赤枠のところで手軽に確認できます。左からの位置などのチェックできます。

コメント