Search code examples
htmlcssviewportmeta

What takes precedence: meta viewport tag or css @viewport rule?


I'm wondering which takes precedence (hopefully with cross-browser consistency): <meta name="viewport" content="..."> or the css @viewport rule.

According to caniuse.com, @viewport is hardly supported right now, but does anyone have an idea if the css, once supported, would override the meta tag, especially if both are included in the code?


Solution

  • Accorrding to the very draft spec CSS Device Adaptation Module Level 1, the precedence is determined by the position of the viewport element in the DOM

    The Viewport <META> element is placed in the cascade as if it was a <STYLE> element, in the exact same place in the dom, that only contains a single @viewport rule.

    That is, it would override @viewport rules that precede it, and be overridden by @viewport rules that follow it, except that when @viewport declarations have higher importance (!important), they would always trump viewport <meta> element rules.