Media query tests - width

The width media query uses the width of the layout viewport (or, on desktop, the width of the viewport). The height media query uses the height of the same.

1. Test with width=device-width,initial-scale=1
2. Test with initial-scale=2
3. Test without meta viewport
4. test with the em and rem units

width

Equality

See notes at the bottom of the page. Reload after resizing your window or changing the orientation.

Units

Values

height

Equality

See notes at the bottom of the page. Reload after resizing your window or changing the orientation.

Units

Values

Equality notes

OK, this is complicated.

1. On mobile the width media query should be equal to document.documentElement.clientWidth, because both use the layout viewport width. No exceptions allowed.
2. On desktop, historically document.documentElement.clientWidth gives the page width excluding the scrollbar, while window.innerWidth includes the scrollbar.
3. In IE, Firefox, and Opera, the width media query includes the scrollbar, hence it’s equal to window.innerWidth.
4. In the WebKit-based browsers, the width media query excludes the scrollbar, hence it’s equal to document.documentElement.clientWidth.
5. However, the WebKit-based browsers on OS X and IE10 on Windows 8 do not use a scrollbar that takes up screen real estate any more. Instead, they use the floating thing. Thus the width media query is equal to both document.documentElement.clientWidth and window.innerWidth.

Note that on desktop this test will only work at the moment you load the page. If you change the page dimensions in any way the test fails. Reload this page to redo the test with other page dimensions. It’s not possible to change the page dimensions on mobile, except by re-orienting the device.