[bookmarklet]CSS3 Media Queriesのデバッグに有用なブックマークレット

CSS3 Media Queriesのデバッグに有用で、シンプルなブックマークレットを紹介します。

Window Size Bookmarklet:
see the size of any page to debug CSS3 media queries and adaptive layouts

[ad#ad-2]

CSS3 Media Queriesはユーザー環境の状態に適したスタイルシートを提供することができ、例えばブラウザやモバイルデバイスの異なる表示サイズにより、異なるデザインを適用することができます。

ここで紹介するのはビューポートのサイズを表示するシンプルなブックマークレットです。ブラウザの表示サイズ変更の確認・調整が簡単に行えます。

ビューポートのサイズは、左上に表示

ブラウザのサイズを変更すると、リアルタイムに表示も変更されます。

サイズを変更すると、リアルタイムに表示も変更

[ad#ad-2]

ブックマークレットは以前はjQueryに依存して開発されていましたが、0.2より依存しないで動作するようになりました。

• Window Size Bookmarklet（ブックマークレット）

ブックマークレットは、ドラッグして「ブックマーク（お気に入り）」に登録することができます。
利用する際は、該当のページを表示し、「Window Size Bookmarklet」を選択します。

上記をクリックすると、今表示しているビューポートのサイズが表示されます。