Menacing Cloud

CSS @viewport or Meta Tag?

25th October 2012, by Edward Cant.

The viewport meta tag has become a key technique behind Responsive Web Design.

It is not a standard, but has been widely adopted due to the initial head start provided by iOS support.

IE10 in snapped mode does not support the meta tag, but does support the proposed CSS @viewport rule.

If you want your website to adapt to the size of the IE ‘snapped’ view, you have to include the appropriate @viewport code.

It is worth noting that other browsers in the same environment (Metro, Windows 8 UI) will still adhere to viewport settings defined via the meta tag.

At this point designers should be wary of both, but which to use?

Ideally the @viewport rule will be standardised and supported soon, meaning one viewport declaration method. Until then my advice would be to simply repeat viewport settings via both methods.

This is not a case of pandering to IE, @viewport is the proposed standard and is supported by Opera Mobile 11 and onward.

Repeat Viewport Declarations

The viewport meta tag is declared in the <head> so for convenience I propose declaring the @viewport rule here as well via an internal style sheet.

<head> <meta name='viewport' content='width=device-width' /> <style type='text/css'> @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } </style> </head>

This keeps viewport definitions in one place. It also avoids any confusion regarding @viewport rule dependency in different style sheets.

One viewport meta tag, one @viewport rule. Simple.

In theory, the meta tag followed by viewport rule will allow browsers that support both to favour the latter i.e. the proposed standard.

Viewport Descriptors

@viewport { width: auto; // auto | device-width | length | percentage // 'width' sets both max and min-width. It's a shorthand descriptor. max-width: auto; min-width: auto; // 'zoom' equates to 'initial-scale' in meta tag. // Values of 1.0 or 100% mean no zoom. zoom: auto; // auto | number | percentage max-zoom: 5; // Largest allowed zoom factor. min-zoom: 0.25; // Smallest allowed zoom factor. // Can the zoom factor be changed by user interaction? // Equates to 'user-scalable' in meta tag. user-zoom: zoom; // fixed | zoom // Lock orientation or leave to auto. orientation: auto; // auto | portrait | landscape }

Remember that the @viewport rule requires vendor prefixing, for now (October 2012).

The orientation declaration would be massively useful for web apps so I hope the proposed standard takes effect soon!

Conclusion

Microsoft's stance on viewport definition standards is a relatively controversial one, but only because it upsets the current responsive design routine.

I personally think that responsive web design techniques are particularly suited to a ‘snapped’ UI view. As a result many designers will want to ensure their designs display as intended, giving Opera's viewport proposal some deserved attention.

It helps that the snapped view is similar in size to existing design patterns that focus on 320 pixel viewports. Supporting them with the standard seems like the right thing to do, in my opinion.

Recommended Reading

The @viewport rule is fully fleshed out in the CSS Device Adaptation specification.

An introduction to meta viewport and @viewport via Andreas Bovens.

Comments

Comments, suggestions or feedback via Edward Cant on Twitter please.

Follow the author on Twitter.

ProtoFluid. ‘Effortless responsive web design testing’.

Previous Articles

Canvas Generated Icons. Read more.

Targeting Windows 8 Snap Mode. Read more.

CSS @viewport rule or viewport meta tag? Read more.

The Responsive Viewport. Missing piece of the responsive web design puzzle? Read more.

Getting the Viewport Scale.
Read more.

Hiding the iPhone Address Bar.
Read more.

Orientation Correct Screen Width.
Read more.

iPhone Title Modification.
Read more.

Optimising for High Pixel Density Displays.
Read more.

CSS3 Media Query Prototyping With ProtoFluid.
Read more.

AJAX Kill Switch. Version 2.
Read more.

URI Processing With JavaScript.
Read more.

Source Code

All source code is provided for free.

A standard disclaimer of warranty and limitation of liability applies.