为提升您的使用体验,本站正在维护,部分功能暂时无法使用。如果本站文章无法解决您的问题,您想要向社区提问的话,请到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 提问,我们的支持社区将会很快回复您的疑问。

搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

详细了解

Does Firefox support @viewport in CSS3

more options

In my CSS file I start with :

@viewport {

   width: device-width;

}

When I test the website and of-course the HTML5 and CSS3 too, I get the message that this rule is not recognized. Do I make a mistake?

Regards,

Dirk

In my CSS file I start with : @viewport { width: device-width; } When I test the website and of-course the HTML5 and CSS3 too, I get the message that this rule is not recognized. Do I make a mistake? Regards, 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"

定位到答案原位置 👍 1

所有回复 (5)

more options

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:

more options

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

more options

由cor-el于修改

more options

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

由ddetmar于修改

more options

选择的解决方案

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"