これを待ってた!無料で、単なるiframeのサイズ変更でなく、各デバイスと同じ方法でレンダリングさせるレスポンシブ確認用の便利ツール -RWD Tester

スマホやタブレットなど、人気の高いモバイルデバイスでWebページがどのように見えるか簡単に確認できるChromeの機能拡張を紹介します。

レスポンシブの確認ツールでよくあるのが、iframeで単にサイズを変更して見るだけのやつ。当ツールはサイズだけでなく、各モバイルデバイスと同じ方法でレンダリングして表示、外部ネットワークだけでなくローカルにも対応しています。

テスト時のUA表示

iPad, Nexus7モードで表示した際のUA

サイトのキャプチャ

Responsive Web Design Tester

RWD Testerは無料で利用できるChromeの機能拡張で、インストールするとツールバーから簡単に利用できます。

RWD Testerの使い方

ツールバーのボタンから起動

右クリックからも起動でき、表示ページをさくっと確認できます。

RWD Testerの使い方

右クリックから起動

スマホやタブレットなどの各デバイスを選択すると、別ウインドウでページが表示されます。
せっかくなので、UAが表示されるページを各デバイスで開いてみました。
ベースのブラウザは、Chrome for OS Xです。

RWD Testerのキャプチャ

iPhone6s Portraitで表示

RWD Testerのキャプチャ

iPad mini Landscapeで表示

RWD Testerのキャプチャ

Nexus7 Landscapeで表示

RWD Testerは、Chromeウェブストアからダウンロードできます。

サイトのキャプチャ

RWD Testerのダウンロード -Chromeウェブストア

top of page

©2016 coliss