rFrameはJavaScript/jQuery製のオープンソース・ソフトウェア（MIT License）です。

レスポンシブで作成されるWebサイトが増えています。そうした時の表示確認ではウィンドウの幅を縮める方法もありますが、今回はrFrameを使った方法を紹介します。デバイスと方向を指定して表示を素早く確認できます。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-15 21.51.40.1373895084.png)
iPhone5、縦の場合です。画面上部のツールバーで指示できます。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-15 21.51.51.1373895088.png)
iPhone4の場合。デバイスの縦の表示領域が狭まりました。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-15 21.52.02.1373895092.png)
メニューなどをクリックすることもできます。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-15 21.52.13.1373895095.png)
横向きの表示に切り替えもできます。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-15 21.52.28.1373895099.png)
iPadの場合。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-15 21.52.40.1373895103.png)
こちらはKindle。iPadと比べて横の表示領域は殆ど変わらない模様。

[](http://images.moongift.jp/2013/07/Screenshot 2013-07-15 21.53.04.1373895107.png)
Androidもありますが、これはどのデバイスかによって変わりそうです。

rFrameはiframeタグを使って幅を変更することでレスポンシブのデザイン確認が出来るようになっています。ユーザエージェントによって表示を切り替えている場合は対応できませんのでご注意ください。レスポンシブWebデザインの簡易的な確認に使えそうです。

MOONGIFTはこう見る

本来レスポンシブWebデザインであれば、あらゆる画面幅に対して適切な表示を行う必要があります。しかし殆どの場合はiPhone/iPad/デスクトップの3種類に対応していれば良しとされているようです。Androidの場合、多様な画面幅が存在するため、全てのデザインを適切に行えるかどうかは分かりません。

そのためrFrameにおいても主立ったデバイスの画面幅に対して表示できているかどうかの確認が主な使い方になっています。逆に言えば少なくともrFrameが提示しているデバイスくらいは表示できて然るべきなのかも知れません。なおrFrameではFlashやJavaScriptなどの適切な対応は難しいのであくまでも簡易的な表示確認と考えるのが良さそうです。

rFrame, A responsive frame emulator to aid with mobile development

seyDoggy/rFrame