hh
The viewport metatag was Apple's solution to the problem. It was adopted quickly by other platforms, but it was never put forward by the W3C. Microsoft brought this to light when they chose for IE10 to ignore the viewport metatag under certain circumstances. Instead, they opted to use CSS Device Adaptation, which is what the W3C are leaning on.
In short, similar viewport properties are defined within CSS using the @viewport rule, instead of within the HTML.
1
2
3
4
| @viewport{ zoom: 1.0; width: device-width;} |
Or, in accordance to our newer don't specify device width approach, we could set the following:
1
2
3
4
| @viewport{ zoom: 1.0; width: extend-to-zoom;} |
Given that it's a work in progress, IE10 requires the prefixed version of the proposal, which looks something like this:
1
2
3
4
| @-ms-viewport{ width: extend-to-zoom; zoom: 1.0;} |
It's a far more elegant solution than the metatag, but is a long way from being fully supported. Slot it into your CSS now, to make sure your responsive design behaves itself in IE10 "snap mode", and keep an eye on its progress in the future. This is where viewport control is headed.
You can read more about this in Tim Kadlec's post IE10 Snap Mode and Responsive Design.
Conclusion
Responsive web design isn't just for people who enjoy watching their browsers grow and shrink, it's about catering for as many different devices, screens and resolutions as possible! Throw the viewport meta tag into your
<head>, plus the @viewport rule into your CSS when you're building flexible layouts and you're good to go.
Comments
Post a Comment