setting an @viewport rule

[Nick-Levinson]

I'm trying out adding "@Viewport {width: device-width;}" (without quotation marks) to main.css on the basis of https://developers.google.com/speed/docs/insights/ConfigureViewport and CSS Device Adaptation (http://www.w3.org/TR/css-device-adapt/), section 4.1, both as accessed June 23, 2015, but I don't know if I can test it adequately. At any rate, apparently an @Viewport rule should precede @media rules, but I'm not sure of that, and sometimes an @Viewport rule appears within an @media rule. Maybe something should be in a normalize.css or main.css file.

[filipelinhares]

You're trying to add @viewport { width: device-width } but it's already added in the HTML as a meta tag.

[Nick-Levinson]

If we want a single set of pages for all media, CSS lets us write rules for different media. Putting it into HTML is helpful when we have multiple sets of pages according to media and want to save on CSS downloading time, but multiple page sets need more maintenance, and cutting that down means @Viewport should be in a *.css file.

[danellebailey]

Hi Nick, I think this will be helpful. http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport

[QWp6t]

http://caniuse.com/#search=%40viewport

👎

[Nick-Levinson]

Both of the links in the last two posts above support the rule being in CSS. I'm not skilled enough to write the exact language we should use in H5BP, though, so I hope someone will. Thanks.

[ghost]

I agree that styling / visuals is the job of css and should be banished to our css files, but unfortunately in the current web-scape we work in the meta tag rules all regarding viewport.

Once there is better browser support, and H5BP is no longer supporting browsers that cannot use the @Viewport rule (which is everything...pretty much at the moment), I think the h5BP team will migrate this to the CSS for sure and drop the meta tag.

[danellebailey]

Agreed. I was under the impression of reading this issue that there was a project effort to support it.

[alrra]

http://caniuse.com/#search=%40viewport

Closing as the situation doesn't seem to be much different from when we had the previous discussion (see: #1047 & #1243).

[Nick-Levinson]

A footnote: I'm puzzled by the CanIUse table, since it says Firefox does not support it, but that's the browser I test in and have been testing in, using its Responsive Design View feature, and the design responds appropriately at the various widths (I use *.css only for this and not meta tags and except that I can't test at less than 50px but I don't know of devices narrower than that anyway). I also get appropriate responses in Chromium 47.0.2526.106 (64-bit) and Konqueror 4.14.8 at narrower widths (they have other problems so I prefer Firefox, but they handle widths appropriately). I don't know how different Chromium is from Chrome. The CanIUse table looks wrong on Firefox and I wonder if the same testing of other browsers is likewise flawed and misleading us.