Ignore `<meta name=viewport>` if `@viewport` is ignored

[notriddle]

Fixes #8373

[jdm]

r? @mbrubeck

[jdm]

We should add an entry to prefs.json, too.

[notriddle]

There already is an entry in prefs.json.

On Sun, Nov 15, 2015, 20:43 Josh Matthews notifications@github.com wrote:

We should add an entry to prefs.json, too.

—
Reply to this email directly or view it on GitHub
#8538 (comment).

[mbrubeck]

Reviewed 6 of 6 files at r1.
Review status: all files reviewed at latest revision, all discussions resolved.

---

Comments from the review on Reviewable.io

[mbrubeck]

@bors-servo r+

[bors-servo]

📌 Commit 987c9e6 has been approved by mbrubeck

[bors-servo]

⌛ Testing commit 987c9e6 with merge 2f0475a...

[bors-servo]

💔 Test failed - linux-rel

[mbrubeck]

FAIL [expected PASS] /css21_dev/html4/background-root-101.htm

[jdm]

@bors-servo: retry

• #8487

[bors-servo]

⌛ Testing commit 987c9e6 with merge c1e6bc0...

[bors-servo]

☀️ Test successful - android, gonk, linux-dev, linux-rel, mac-dev-ref-unit, mac-rel-css, mac-rel-wpt

[frivoal]

Hello. Spec co-editor for @Viewport here. Just curious (and confused). What's this about? When do you ignore @Viewport?

[eefriedman]

There's a preference which controls whether @viewport rules are processed. The intent is that mobile browsers will enable processing @viewport rules, and desktop browsers will disable it. Web compatibility at its finest. :)

[frivoal]

Hmm, that's actually problematic. metia viewport needs to work this way, but @Viewport is explicitely designed so that it would apply to both desktop and mobile and things in between.

There's two points that matter here:

1. @Viewport can be useful on desktops

2. not including @Viewport on desktops is harmful

3. When a site isn't responsive, or only responsive down to a certain size, @Viewport can be used to indicate the smallest acceptable width. @viewport { min-width: 400px; }. Desktop browsers, just like mobile ones, can (and should) respond to that.

4. If we don't include @Viewport in desktop browsers early on, there's a risk a non trivial amount of website will put something like this in their stylesheet: @viewport { width:320px;}. This will make the site responsive on mobile (even if the number of pixels is slightly wrong for some devices, it's not that far off), but would be terrible on desktops. And if enough sites do that, it becomes impossible to start supporting @Viewport on desktops later, due to backward compat.

What authors should be doing to make their sites responsive is @viewport {width:auto} which is a no-op on desktop since auto is the intial value and it is not overridden by stylesheets, or @viewport {min-width: 320px;} which overrides the 980 px (or whatever) default viewport of mobile browsers, and causes no harm on desktops.

I strongly encourage you to follow microsoft here, and to activate @Viewport on all platform.

On my side, I'll make sure there's a big warning in the spec talking about this. I though there was one already, but I can't find it now, so apparently misremembered.

In the meanwhile, here's a quick and dirty test case that should pass in desktop and mobile browsers alike. (I'll convert that to a clean TC whenever I get some time, unless you want to do so first).

http://output.jsbin.com/gusahiguyu

This passes in Edge.

[frivoal]

Specification updated with the relevant warning:
https://drafts.csswg.org/css-device-adapt/#atviewport-rule

[Ms2ger]

FWIW, I think this was one of the features that was behind the catch-all "experimental" flag; it's not clear to me whether the implementation is good enough to enable be default, independent of mobile/desktop. Having a serious test suite for us to run would help, though.

[frivoal]

Having a flag for it is good at this stage, but that doesn't change the fact that it should work both on desktop and mobile or neither, not being turned on independently.

As for the test suite, I hear you. I just don't have the resources to focus on it now. If you write some, I will make sure they get reviewed in a timely manner.