これを待ってた!無料で、単なるiframeのサイズ変更でなく、各デバイスと同じ方法でレンダリングさせるレスポンシブ確認用の便利ツール -RWD Tester
Post on:2016年2月19日
スマホやタブレットなど、人気の高いモバイルデバイスでWebページがどのように見えるか簡単に確認できるChromeの機能拡張を紹介します。
レスポンシブの確認ツールでよくあるのが、iframeで単にサイズを変更して見るだけのやつ。当ツールはサイズだけでなく、各モバイルデバイスと同じ方法でレンダリングして表示、外部ネットワークだけでなくローカルにも対応しています。
![テスト時のUA表示](http://coliss.com/wp-content/uploads-201601/2016021901.png)
iPad, Nexus7モードで表示した際のUA
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016021902-01.png)
RWD Testerは無料で利用できるChromeの機能拡張で、インストールするとツールバーから簡単に利用できます。
![RWD Testerの使い方](http://coliss.com/wp-content/uploads-201601/2016021902-02.gif)
ツールバーのボタンから起動
右クリックからも起動でき、表示ページをさくっと確認できます。
![RWD Testerの使い方](http://coliss.com/wp-content/uploads-201601/2016021903.png)
右クリックから起動
スマホやタブレットなどの各デバイスを選択すると、別ウインドウでページが表示されます。
せっかくなので、UAが表示されるページを各デバイスで開いてみました。
ベースのブラウザは、Chrome for OS Xです。
![RWD Testerのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016021905-01.png)
iPhone6s Portraitで表示
![RWD Testerのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016021905-02.png)
iPad mini Landscapeで表示
![RWD Testerのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016021905-03.png)
Nexus7 Landscapeで表示
RWD Testerは、Chromeウェブストアからダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201601/2016021904.png)
sponsors