Last Comment Bug 747754 - [CSS-WD] implement CSS Device Adaptation
: [CSS-WD] implement CSS Device Adaptation
Status: NEW
[parity-IE] [parity-Opera] [parity-bl...
: dev-doc-needed
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: unspecified
: All All
-- enhancement with 15 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: Jet Villegas (:jet)
Mentors:
http://dev.w3.org/csswg/css-device-ad...
Depends on:
Blocks: 677989 native-viewport 804584
  Show dependency treegraph
 
Reported: 2012-04-22 08:14 PDT by Florian Bender
Modified: 2017-02-03 16:23 PST (History)
22 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description User image Florian Bender 2012-04-22 08:14:06 PDT
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).
Comment 2 User image Anthony Ricaud (:rik) 2012-09-07 01:02:54 PDT
*** Bug 242646 has been marked as a duplicate of this bug. ***
Comment 3 User image Anthony Ricaud (:rik) 2012-09-07 01:04:25 PDT
WebKit is also working on an implementation: https://bugs.webkit.org/show_bug.cgi?id=95959
Comment 4 User image Peter Gasston 2013-02-02 06:37:03 PST
Already implemented in WebKit now: https://bugs.webkit.org/show_bug.cgi?id=95961
Comment 5 User image Peter Gasston 2013-02-02 06:38:23 PST
Sorry, meant that the @viewport rule is implemented, not the whole module.
Comment 6 User image Florian Bender 2013-11-12 12:44:26 PST
The Chromium Bug is crbug.com/155477 – Moz could be the last one to implement this.
Comment 7 User image Florian Bender 2014-03-23 12:08:34 PDT
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.
Comment 8 User image Jonny Barnes 2015-01-21 11:37:13 PST Comment hidden (off-topic)
Comment 9 User image Matt Brubeck (:mbrubeck) 2015-01-21 11:53:47 PST Comment hidden (off-topic)
Comment 10 User image Karl Dubost :karlcow 2015-06-04 19:28:08 PDT
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.
Comment 11 User image Florian Bender 2015-10-15 00:24:46 PDT
Removing parity-webkit since the implementation seems to have been abandoned after Google forked to Blink.
Comment 12 User image gijsbertth 2016-07-24 12:52:25 PDT
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.

Note You need to log in before you can comment on or make changes to this bug.