Proposals/zoom media feature

For 'zoom' feature for media queries, I (stakagi) enumerate the possibility of some definitions of it.

Possible definitions of the 'zoom' for zoom media feature

1

(webkit) zoom1 = PageZoom * PageScale * (CSS/SVG scale transforms)

(Gecko)  zoom1 = FullZoom * resolution * (CSS/SVG scale transforms)

(CSS)  zoom1 = PageZoom * PinchZoom * (CSS/SVG scale transforms)

Here, each coefficients (ratios) are defined with #See also.

According to this, the content can control the representation according to zooming including browser chrome's native zooming function.

2

(webkit) zoom2 = (CSS/SVG scale transforms)

(Gecko)  zoom2 = (CSS/SVG scale transforms)

According to this, the content can control the representation without depending on the browser chrome's native zooming function.

3

(webkit) zoom3 = PageScale * (CSS/SVG scale transforms)

(Gecko)  zoom3 = resolution * (CSS/SVG scale transforms)

According to this, the content can control the representation by zooming including touch screen browser chrome's native pinch-zooming function. However, it does not depend on the desktop browser chrome's native zoom function.

4

(webkit) zoom4 = PageZoom * PageScale * DeviceScale * (CSS/SVG scale transforms)

(Gecko)  zoom4 = FullZoom * resolution * WidgetScale * (CSS/SVG scale transforms)

(CSS)  zoom4 = PageZoom * PinchZoom * resolution[dppi] * (CSS/SVG scale transforms)

This is zoom where window.devicePixelRatio was multiplied in addition to the first.

stakagi: I like the first one, because I want to control representation not only webApp's zooming but also browser chrome's native zooming.
On the other hand, DeviceScale or WidgetScale should not be generally multiplied. (the fourth) Because it is the thing which was introduced to cancel differences of DPI of the physical screens.

window.devicePixelRatio = DeviceScale = WidgetScale = resolution[dppx]
IE11's window.devicePixelRatio varies according to browser chrome's zooming.

Difinitions for CSS/SVG scale transforms

(CSS/SVG scale transforms) should be defined as the square root of absolute value of determinant of transform matrix. This is because it may be rotated and skewed.

(CSS/SVG scale transforms) = math.sqrt(math.abs( a * d - c * b )) (2D)