One of the nice things about building mobile apps with HTML5 is that they can also work in a desktop browser. As well as making debugging easier, this allows you to put a preview of the app online without having to go through the full build process.

The new version of Chondric is particularly good for this, as the viewport element is mostly independent of any other content on the page.

Apps designed for a phone tend not to look very good when scaled up to a desktop screen. Fortunately, we can use some media queries to get a more appropriate viewport without affecting how the app appears on a phone.

@media (min-device-width: 569px) {
/* iPhone sized viewport when used on a desktop */
    .viewport {
       position: relative;
        width: 320px;
        height: 548px;
    }
}

App preview

This view has been working well enough for testing, but I also want to be able to show development progress to clients, which requires something a little more polished. All it takes is a couple of background images. The iPhone image is the official one from the apple developer site - when resized to 692x1137 the screen dimensions match the actual device.

@media (min-device-width: 568px) {
/* iPhone sized viewport when used on a desktop */
    .viewport {
        position: relative;
        width: 320px;
        height: 548px;
      margin: 144px auto;
  }

  body {
      /* https://developer.apple.com/appstore/resources/marketing/index.html */
      /* http://www.fuzzimo.com/free-hi-res-canvas-textures-seamless/ */
      background-image: url(images/iPhone5.png), url(images/canvas.jpg);
      background-repeat: no-repeat, repeat;
      margin: auto;
     background-position-y: -70px;
     background-position-x: center;
  }
}

App preview

The end result looks much nicer - The app itself is still just a few generated pages, but it feels a lot more complete.