Bug 747754 (@viewport)

Implement @viewport at-rule

NEW
Unassigned

Status

()

Core
CSS Parsing and Computation
--
enhancement
5 years ago
20 days ago

People

(Reporter: Florian Bender, Unassigned)

Tracking

(Blocks: 2 bugs, {dev-doc-needed})

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [parity-IE] [parity-Opera] [parity-blink], URL)

(Reporter)

Description

5 years ago
iOS Safari introduced <meta> viewport for influencing how Websites are rendered on mobile devices. However, the design of <meta> viewport is flawed (not solely by handling this via a HTML tag instead of CSS) and implementations across different platforms differ (see e. g. device-width and landscape mode). 

The Opera Dev Team designed a CSS replacement for the <meta> viewport tag including how to handle the <meta> viewport tag when CSS Device Adaption is implemented by an engine. See W3C editor's draft: http://dev.w3.org/csswg/css-device-adapt/

Opera Mobile and IE10 already implemented the proposal (with vendor prefixes). 

Especially for Fennec, but also possibly Fx, this proposal is very helpful, as it also defines how to handle a <meta> viewport tag and clarifies features resp. provides more flexibility than iOS's solution. 

Please implement it (with vendor prefix, as the proposal hasn't matured yet).
(Reporter)

Updated

5 years ago
(Reporter)

Updated

5 years ago
(Reporter)

Updated

5 years ago
(Reporter)

Comment 1

5 years ago
Opera Post: http://www.opera.com/docs/specs/presto28/css/viewportdeviceadaptation/
MSDN Post: http://msdn.microsoft.com/library/ie/hh708740.aspx
(Reporter)

Updated

5 years ago
Severity: normal → enhancement

Updated

5 years ago
Duplicate of this bug: 242646
WebKit is also working on an implementation: https://bugs.webkit.org/show_bug.cgi?id=95959
Depends on: 804584
Blocks: 804584
No longer depends on: 804584

Comment 4

4 years ago
Already implemented in WebKit now: https://bugs.webkit.org/show_bug.cgi?id=95961

Comment 5

4 years ago
Sorry, meant that the @viewport rule is implemented, not the whole module.

Updated

4 years ago
Keywords: dev-doc-needed
Blocks: 677989
(Reporter)

Comment 6

4 years ago
The Chromium Bug is crbug.com/155477 – Moz could be the last one to implement this.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: [parity-IE], [parity-Opera] → [parity-IE] [parity-Opera] [parity-webkit]
(Reporter)

Updated

4 years ago
Blocks: 793462
(Reporter)

Updated

4 years ago
See Also: → bug 845690
(Reporter)

Comment 7

3 years ago
This has since been implemented behind a runtime flag in Chrome. IE10 has a prefixed implementation. Don't know if Opera has this enabled after switching to Blink, or they regressed. Either way, Gecko is indeed the last big engine that has no implementation of @viewport.
Whiteboard: [parity-IE] [parity-Opera] [parity-webkit] → [parity-IE] [parity-Opera] [parity-webkit] [parity-blink]
Comment hidden (off-topic)
Comment hidden (off-topic)
As of today
http://caniuse.com/#feat=css-deviceadaptation

* IE11 and Edge with -ms- prefix
* Opera Mini with -o- prefix
* Still behind a flag for Chrome.
(Reporter)

Comment 11

2 years ago
Removing parity-webkit since the implementation seems to have been abandoned after Google forked to Blink.
Whiteboard: [parity-IE] [parity-Opera] [parity-webkit] [parity-blink] → [parity-IE] [parity-Opera] [parity-blink]

Comment 12

10 months ago
I'd love to see this too. I recently ran into the issue where my web-page just looked horrible on a 4k(UHD actuall) resolution, without any good solution.
If I had been able to reliably use @viewport{max-width:1980px} I could've just zoomed the page and retained the same view as on an HD screen. There just wasn't enough content to fill a 4K screen.
Maybe there's another solution, but the viewport CSS rule seemed like the proper way to do this.
Blocks: 1354483
I've adjusted the summary to reflect what this is actually asking for and in regard of the newly created tracking bug 1354483.

Sebastian
Alias: @viewport
Summary: [CSS-WD] implement CSS Device Adaptation → Implement @viewport at-rule
You need to log in before you can comment on or make changes to this bug.