GoogleChromeのデベロッパーツール表示時、右上に出ていたウィンドウサイズが消えた


そーです、消えました。

GoogleChromeのバージョンアップか何かでしょうか?
とりあえずデベロッパーツールを表示させると、ウィンドウ内の右上でウィンドウサイズを変えたときだけ表示されていた、ウィンドウサイズの表示が消えました。
復帰させる方法をご存知の方、エクステンションをご存知の方、ぜひご連絡ください(笑)

あのウィンドウサイズの表示が無いと何が不便かというと、レスポンシブサイトを作るときです。
表示があると「今どのCSS(メディアクエリ)が適応されているな」とか分かるんですけど…。
消えたことによって横幅が分からず…。

いくつか重要なところが分かればいい、とか、ブレークポイントの様子だけ分かればいいとか、
いろいろ意見はあると思います。
ただできるならどんな横幅のときにもキレイに表示されていてほしいなぁ、と。

というわけでjQueryを強引に書きました…。
ダウンロードはこちら

同日 追記
なんかたまに、コンテンツの下に潜り込んじゃったりするみたいなので
z-index: 1000; を追加しました(ノ∀`)ごめんちゃい。

こちらをサイトに入れてもらうと、右上にちっこくピクセル数が表示されます。
↓こんな感じw
00x
ウィンドウを広くしたり狭くしたりすると、そのたび値を表示してくれます。
ただそんだけです(笑)
コードもほんの数行なんで、ちょこっと調べ物したらできました。

気をつけたいのは
————————————
$(window).width()
————————————
これだとウィンドウのスクロールサイズを含めないサイズを取得するんだけど、
それだとブレークポイントより10数ピクセル狭い値で挙動が変わる。

つまりスクロールバーを含めたサイズを取得しないと、正しいブレークポイントで
レスポンシブに挙動しない、ってことが分かって。
————————————
window.innerWidth
————————————
こっちを使いました。これだとスクロールバーも含めたサイズを取得できるんだとか。
勉強になりました(**・w・)

あ、制作や開発が終わったらjQuery外しましょう。本サイトで右上に表示されているとナニコレ感満載になるのでw

よく考えてみると、これがあればChromeにこだわる必要がないですね。
どのブラウザでも表示されるようになりますし。ちょっとだけメリットがあった…のかな?

参考にさせていただきました:ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い(Black flag様)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.