レスポンシブデザインにリプレイスする際のテスト方法

Question

お世話になっております。

Webサイトを一括してレスポンシブにリプレイスする際のテスト方法はどのようなものがあるでしょうか？

例えば、pcのブラウザ(Chrome)でサイズを変えてみてデザインが崩れないかチェックするのが思いつきますが、これで網羅出来ているのでしょうか？
見た感じ、Chromeの最小サイズはスマホの画面より大きい気がします。
それから、ガラケーの場合はもっと幅が狭くなると思います。

何をすれば一般的なデバイス(デスクトップ～ガラケー)のサイズを網羅できるでしょうか？

レスポンシブフレームワークはbootstrapを想定しています。

Answer 1

Google Chromeであればデバイスモードでモバイル端末をエミュレートできます。
Windowsであれば、開発者ツール表示中にCtrl + Shift + Mで切り替えが可能です。

Device Mode でのモバイル端末のシミュレート

他のブラウザでも、例えばFirefoxにも同様にレスポンシブデザインモードがあります。

レスポンシブデザインモード - 開発ツール | MDN

画面サイズによる表示確認であれば上記で十分かもしれませんが、あくまでエミュレートですので、実機での確認がまったく不要となるかというとそこまでは言えないかと思います。

Comments

[lupus_dingo]

回答ありがとうございます。
参考にします。
firefoxの開発者ツールが分かりやすかったのでベストアンサーにさせて頂きました。

Answer 2

画面サイズだけを確認したいのであればchromeやFirefoxなどお好きなブラウザの開発者ツールを使用すれば可能です。
ですが、実際にはandroidやiOS独自の崩れを確認するために実機や各種エミュレータでの確認がほぼ必須となると思います。

Comments

[lupus_dingo]

回答ありがとうございます。
参考にします。

Answer 3

レスポンシブデザインの表示テストサービスなどがあります。

• Responsive Design Testing
  http://quirktools.com/screenfly

• Responsive Checker
  http://html5-lab.jp/checker/

• RWDTT
  http://rwd.cre8or.jp/#

先の回答者の方もおっしゃっている通り完璧なエミュレートではないですが。

Comments

[lupus_dingo]

回答ありがとうございます。
確認用のWebサイトがあるんですね。
参考にします。