Question

I built a mobile website to fit 320px wide. In this thread (http://stackoverflow.com/questions/4520064/mobile-website-for-iphone-problems) it throws out a useful piece of code to ensure that the iPhone displays it at the correct resolution, 320 wide. However, when I rotate the phone it doesn’t automatically rescale to fit the wider viewport.

Any suggestions on how to fix that?

Answer 1

You can dynamically size your content using CSS media queries [w3.org].

To detect when a mobile phone is portrait or landscape, use orientation, for instance:

@media all and (orientation:landscape) {
    /* apply your css styles here */
}

You can also chain together specific scenarios, depending on how specific you want to be. For instance, if you wanted to style a portrait browser with a device width of 400px you would do the following:

@media all and (orientation:landscape) and (device-width:400px) {
    /* apply your css styles here */
}

*It should be noted that media queries should be at the very end of your CSS files, otherwise they won’t properly overwrite your existing styles.