Media Query Example for iPads

Dynamically Sizing the Page Contents to the Viewport

If you are using a standard browser, change the width of the window so you can see this in action.

Using 320 and smaller (phone portrait orientation)

default

Using 321 to 480 (phone landscape orientation)

min-width : 321px

Using 481 to 768 (iPad portrait orientation)

min-width : 481px

Using 769 and larger (iPad landscape or full-screen monitor)

min-width : 769px

This page is built on premis of mobile-first development; in other words, the standard CSS is for narrow screens.

Fixing IE8

Older browsers don't understand media queries, but there are a few polyfills that can help. This page is using "css3-mediaqueries.js". See the Polyfill page for more information.

Fixing the iOS Bug

There is an iOS Safari bug where the whole screen is scaled up when rotating from portrait to landscape. The solution is to add a bit of JavaScript to your page to allow pinch and zoom.