Summary: | CSS 3 media queries device-width, device-height, width, and height are all handled incorrectly. | ||
---|---|---|---|
Product: | WebKit | Reporter: | Daniel Upstone <mail+community+webkit> |
Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
Status: | RESOLVED INVALID | ||
Severity: | Normal | CC: | fsamuel, johnme, peter, rjkroege, shanestephens |
Priority: | P2 | ||
Version: | 528+ (Nightly build) | ||
Hardware: | All | ||
OS: | All |
Description
Daniel Upstone
2011-06-02 14:59:46 PDT
*-(Not zoom scaling!) Don't know what i was thinking there. Since Android is not built directly from webkit.org source code, we can't track bugs that are unique to it here. Please report this to Google. I have done so, but Safari exhibits the same secondary bug behaviour as Chrome, so that appears to be a Webkit bug. I can only assume the iPhone exhibits the same behaviour as Andriod, as the meta tag originaly started out life on the iPhone for the same reasons as it's now used on Andriod, so again this appears to be a Webkit bug. > the device-width/height reported for Android's browser incorrectly uses the value of the virtual viewport There is/was a bug that the legacy Android Browser would give a value for device-width measured in device-pixels instead of DIPs (see below for definition of DIPs). So on a 720x1280 Galaxy Nexus with a device-pixel-ratio of 2, it would return a device-width of 720 instead of 360. That bug has been fixed in Chrome for Android. I've never seen any cases where it returns the size of the virtual viewport though. I suspect you were just seeing the issue above. > A secondary bug is that the device-width/height and width/height do not change when using a zoom function. It's very deliberate that the values of width and device-width expressions in media queries do not change when the user pinch zooms. Pinch zooming is a way for the user to temporarily enlarge part of the page; it is not intended to change the layout of the page. Although CSS always claims to use CSS pixels for everything, CSS is actually just ambiguous. About half the time that they refer to CSS pixels, they really mean "device-independent pixels" (DIPs), which are a fixed multiple of device pixels. For example if window.devicePixelRatio is 2, each DIP is a 2x2 block of device pixels. This is the unit that CSS usually intends when it talks about window sizes. And the width in DIPs of the device doesn't change when you pinch zoom. I agree that it's really confusing for CSS to use the same name to refer to two different units - I encourage you to raise this on www-style. (I do however agree that the width media query should change when you use full page zoom in a desktop browser, and I've fixed bug 53186, so that should now work). Pretty sure DIPs are not intended to be part of CSS at all and specific to implementations as an interpretation of the spec, before they were defined to be CSS pixels (which are device independent anyway, but aren't always accurate thanks to use of DIPs). The DIPs are actually the problem I was referring to with the virtual viewport. It's not the true value and just an abstraction to create DPI thresholds for the OS. If the zoom for Android is only ever meant to be that type of zoom, then fine (mentioned this for no viewport declarations, but it seems unintuitive when the viewport size is requested to be fixed), but that does mean implementing a zoom that does change layout for accessibility in web apps (and anything else) is not as easy as it should be. Glad to see the desktop zoom fix though, thanks. |