[css-om] Issues with width and resolution media queries

Recently I published a few articles where I point out what I think are bugs
in the media query implementation of the desktop browsers. It was suggested
I move the discussion here, so I do now.

I saw the resolution discussion has already started. This mail does not
connect to any of the previous ones but just summarises my starting point.

It is my belief that the desktop browsers break compatibility with the
mobile browsers in two instances detailed below. In order to explain how
the mobile browsers currently handle the three viewports and related
concepts I created a quick-and-dirty overview page at

http://quirksmode.org/mobile/overview.html

The articles where I describe the problems I feel desktop browsers are
having are at

- http://quirksmode.org/blog/archives/2013/12/desktop_media_q.html (width)
- http://quirksmode.org/blog/archives/2013/12/desktop_media_q_1.html (DPR
and zoom)

Summarised, these are my findings. All of them are explained in more detail
in my blog posts.

- Currently, the width media query in the desktop browsers is slaved to
window.innerWidth (except in Safari), while all mobile browsers slave it to
document.documentElement.clientWidth. This may cause problems in a few
instances; notably when clueless web developers would use window.innerWidth
as an equivalent for the media query. On mobile, this would break horribly,
since there window.innerWidth is the width of the visual viewport, and not
the layout viewport.
Besides, this is just a compatibility issue.

- I feel the recent attempts to define desktop devicePixelRatio as the
current zoom factor are misguided, for the following reasons:

- Zoom level is not the same as DPR. For better or worse, the definition of
DPR is now fixed as a device-based constant, and for reasons of
cross-browser compatibility I feel desktop browsers should not change that
definition.

- On mobile DPR is a constant; on desktop it is a variable. Thus,
implementations of DPR in media queries or JavaScript targeting mobile may
misfire on desktop.

- On desktop, DPR is now de-facto linked to the dimensions of the (layout)
viewport. No such link exists on mobile. DPR does not change when the
layout viewport width is changed, for instance by rewriting the <meta
viewport> tag.

- On mobile, DPR is defined as the ratio between the physical device
dimensions and the ideal viewport dimensions. Thus, oorting DPR to the
desktop also requires the porting of the ideal viewport concept, which has
no meaning on desktop. Firefox does so, but the result is that screen.width
changes as you zoom - a weird effect, though consistent with the emerging
mobile standard.
I feel that for reasons of cross-browser compatibility the zoom level
should be exposed in a separate media query, JavaScript property, and
event, and that DPR should remain a device-based constant as it currently
is.

-- 
--------------------------------------------
ppk, mobile platform strategist
http://quirksmode.org/about/
+.31.6.29585782
--------------------------------------------