レスポンシブデザインのコーディング案件があったので、デバイス毎のテストツールについてまとめようと思います。

Responsive Design Testing

デバイスサイズは主要サイズ(240,320,480,768)は用意されています。一度に主要サイズをチェックできるので、ざっと確認したい時には使用します。

Responsive Design Testing

Responsivator

こちらはサイズの変更ができるのでとても便利です。ダウンロードして解凍すればすぐに使えます。

1. Responsivator ダウンロード

右中にある「DownLoad ZIP」をクリックしてダウンロードします。

Responsivator1

2. Responsivator 解凍

下記が解凍したものです。index.htmlにアクセスします。

Responsivator2

3. Responsivator 表示確認

URLを入力後「RESPONSIVATE!」をクリックするとデバイスサイズ毎の表示の確認ができます。デバイスサイズは、「customize」をクリックすると自分で設定できます。

Responsivator3