Pesquisar no apoio

Evite burlas no apoio. Nunca iremos solicitar que telefone ou envie uma mensagem de texto para um número de telefone ou que partilhe informações pessoais. Por favor, reporte atividades suspeitas utilizando a opção "Reportar abuso".

Saber mais

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

Solução escolhida

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"

Ler esta resposta no contexto 👍 1

Todas as respostas (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

Modificado por cor-el a

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

Modificado por ddetmar a

more options

Solução escolhida

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"