HTML5 and CSS3: Building Responsive Websites

The viewport meta tag

To get the most out of media queries, you will want smaller screen devices to display web pages at their native size (and not render them in a 980px window that you then have to zoom in and out of).

When Apple released the iPhone in 2007, they introduced a proprietary meta tag called the viewport meta tag which Android and a growing number of other platforms now also support. The purpose of the viewport meta tag is to provide a way for web pages to communicate to mobile browsers how they would like the web browser to render the page.

For the foreseeable future, any web page you want to be responsive, and render well across small screen devices, will need to make use of this meta tag.

Tip

Testing responsive designs on emulators ...