Learn about the CSS @viewport and meta tag for Responsive Design

When thinking about responsive design (and you should be), you will have a choice between using the CSS @viewport and the meta tag for viewport. The current recommendation is to use both but it looks like (since IE10 won’t support the meta tag viewport, that the future will be @viewport. Until that standard is set in place universally, use both. Here is more reading on this subject from the people at Opera and here is some additional reading on the subject matter.

[cc lang=”html”][/cc]

Here is a complete list of viewport properties you can control.

and here is the CSS Device Adaptation resource.

note: currently, meta viewport support is currently universal and @viewport needs vender prefixes.

What are the prefixes for @viewport?
-moz (Firefox and other browsers using Mozilla’s browser engine
-webkit – Safari, Chrome, and browsers using the Webkit engine
-o – Opera
-ms – IE (but now always)

Leave a Reply

Your email address will not be published. Required fields are marked *