デバイス別に表示確認できるブックマークレット「VIEWPORT RESIZER」

3.5インチ、4インチ、4.5インチ、5インチ、5.5インチとスマホに様々なサイズがあるようにパソコンやタブレット端末にも様々なサイズがあります。

レイアウト崩れを確認することができないと、万が一レイアウトが崩れていたとしてもわからないということもあります。

例えば、336×280のレクタングル(大)を何も考えずにスマホページに設置してしまうと4インチ以下のデバイスだと左右に少しだけスクロールできるスペースができてしまいます。

この場合、レスポンシブ広告を設置することで回避することができますが、やはりデバイス別の表示を自分の目で確認しておきたいときがあります。

VIEWPORT RESIZER

デバイス別の表示を確認できるWEBサービスはいくつかありますが、URLを入力するという手間さえ省けるブックマークレットのサービスがあります。VIEWPORT RESIZERです。

まずは以下のリンク先からアクセスしてください。

VIEWPORT RESIZER
リンク先⇒ http://lab.maltewassermann.com/viewport-resizer/

真ん中の「CLICK OR BOOKMARK」をブックマークバーの位置までドラッグ＆ドロップします。

続いてレスポンシブの表示を確認したいページで先ほどブックマークしたブックマークレット「Resizer」をクリック。

するとWEBページがこのような画面に切り替わります。上のメニューからスマホ、タブレット、パソコンと様々なサイズを指定することができるというわけです。

しかも縦表示だけでなく、横表示も確認することができますから大変便利なサービスです。

ただ1つ気になった点があります。環境によるものなのかもしれませんが、WordPressはサイドバーがコンテンツの下にくるはずですが、VIEWPORT RESIZERでスマホサイズの表示で見るとサイドバーが右側に表示されているまま表示されているのです。

それ以外は気になる点はなく、便利なサービスだと思うので使ってみる価値はありそうです。今回はデバイス別の表示を確認するためのブックマークレット、VIEWPORTRESIZERの紹介でした。