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

Post on:2016年2月19日

sponsors

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

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

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

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

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

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

右クリックから起動

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

iPhone6s Portraitで表示

iPad mini Landscapeで表示

Nexus7 Landscapeで表示

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