Responsive Design Preview


http://dev.justinavery.me/design/responsive-preview/

Responsive design is becoming more and more popular these days so it is important that web developers can easily view how each device might render the design.

This page displays the following device widths

  • iPhone Portrait (320 x 480)
  • iPhone Landscape (480 x 320)
  • iPad Portrait (768 x 1024)
  • iPad Landscape (1024 x 768)
  • Desktop (1280 x 800)

To update the site design, update the iframe src from http://dev.justinavery.me/design/responsive to your own site address.

Known Issues

Through creating this page I found that setting the width for iPhone Landscape and iPad Portrait needed to be 1px less than the expected width (although that might have something to do with my @mediaqueries).