I'm not seeing any evidence that device-width is a supported value for the width property, so it is likely that that is the cause of the error message.

See:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

When I look at the browser support section of the MDN article, it is not promising:

https://developer.mozilla.org/docs/Web/CSS/@viewport

Can you use the meta tag as a workaround?

https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag

See also:

• https://developer.mozilla.org/Mozilla/Mobile/Firefox_Mobile_for_developers
• https://developer.mozilla.org/Web/HTML/Element/meta#Attributes

I am so sorry but this was my source: CSS 3: The Missing Manual, page 457

Aside from the meta viewport tag, there’s another way to make sure that a phone doesn’t try to shrink your page, but instead displays it at 100 percent size. The CSS Working Group has added an @viewport rule to CSS. It lets you do anything the meta viewport tag does, but within your style sheet. This way, you can skip adding the <meta> tag to each HTML file in your site, and just add one @viewport rule to your main style sheet, like this: @viewport { width: device-width; }

You should add this to the top of your style sheet, before any other styles. Unfortunately, at this time, the @viewport rule isn’t available in all browsers, and requires vendor-prefixes for those browsers that do understand it. You can learn more about @viewport from http://dev.opera.com/articles/view/an-introduction-to-meta- viewport-and-viewport/ and http://dev.w3.org/csswg/css-device-adapt/.

Because this book I am referring to was published in 2013, I supposed that this option would be implemented by now.

I think that it was my mistake to assume this.

Or can I use it anyway with the vendor prefix in front?

Dirk

There seem to be people trying it, but I have no idea whether it has any effect.

https://www.google.com/search?q="@-moz-viewport"