[Webkit-unassigned] [Bug 61970] New: CSS 3 media queries device-width, device-height, width, and height are all handled incorrectly.

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=61970

           Summary: CSS 3 media queries device-width, device-height,
                    width, and height are all handled incorrectly.
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: All
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: mail+community+webkit at zealvurte.co.uk


device-width, device-height, width, and height do not follow the CSS 3 media queries spec correctly. On Android (and possibly iOS) device-width and device-height report the same as width and height. In all cases, none of these change when zooming to reflect the scaling of CSS units.

This may be a Webkit issue itself but i'm not 100% sure as i can't test on an iPhone.

It's well known that the device-width/height reported for Android's browser incorrectly uses the value of the virtual viewport (Which is also known to be larger than the true device dimensions), not the device-width/height itself. This has required designers to use a HTML meta tag to tell the viewport to equal the device-width to force the device's dimensions to report correctly (The device-width/height and viewport width/height are already equal, so this itself is nonsensical owing to the fact that device-width/height is not the true value used internally.).

This should not be a necessary requirement of designers, as the same result would be achieved more easily and effectively if only the true value was returned instead. We do not even need to know the px to pixels ratio either, as this should be a transparent process to CSS when you implement DPI awareness, as as such be reported by the resolution media query correctly for DPI adjustment (Not zoom scaling!).

A secondary bug is that the device-width/height and width/height do not change when using a zoom function. Scaling changes the relationship of a CSS px unit to the physical pixel, and the values reported in CSS 3 media queries use CSS units, so as the page is zoomed in less of these units make up the device's rendering surface, so the device-width/height should report a reduced size.
As the viewport on Android is normaly greater than device's rendering surface and thus virtual it need not be expected that the value of the viewport width/height change if the viewport is changing in size along with the content (I don't know the mechanics of this, so i don't know if that is effectively true.), but on the desktop and when android is using viewport of the same size as the device, the viewport does not change size when zooming, so it too should change it's reported value as you zoom.

This would allow designers to create flexible designs with absolute units and follow the draft media queries spec correctly, without the need to target specific devices or causing scrolling where it is not needed.

For some extra reading on the complexities of the issue and some quick tests:
http://static.zealous-studios.co.uk/projects/web_tests/PPI%20tests.html
http://static.zealous-studios.co.uk/projects/web_tests/units%20and%20media%20queries.html

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.