CSS Media-query support

This is a short document (that's also a work-in-progress) to outline how CSS media queries are supported in browsers. Currently Opera 7 is the only browser known to have experimental support.

Media queries

In case you elected not to read the spec, a media query is a way for a stylesheet author to use different CSS based on the capabilities of the browser, so they can use for example one stylesheet for small viewports, another one for larger viewports, or one can use different CSS for devices with different color capabilities.

And now, on to the tests. The tests should display text depending on the capabilities of your display.

Media-query support

Media queries are unsupported by your browser (or your display is absurdly wide). There is no point in reading on. If you want to see how this works, get Opera 7, if available for your platform

Media queries are supported by your browser. Please go on

Test 1: max-width & min-width

This first test checks the actual size of your viewport and gives you some results

Your device cannot query min-width or max-width.

Viewport is less than 800px wide.

Viewport is less than 600px tall.

Viewport is more than 640px wide.

Viewport is more than 480px tall.

Screen pixel resolutions, I

The first test indicated the actual viewport size. This test tells what pixel resolution your display is capable of

Your browser cannot query display size

Your display is less than 1024px wide.

Your display is less than 768px tall.

Your display is more than 640px wide.

Your display is more than 480px tall.

Screen pixel resolutions, II

This is a test much along the lines of test 2, but here we test against some common, and some not so common resolutions. If you have set your browser to one of these resolutions, it will be displayed here.

Your browser cannot query display size

Your resolution is 640x480px.

Your resolution is 800x600px.

Your resolution is 1024x768px.

Your resolution is 1152x864px.

Your resolution is 1280x960px.

Your resolution is 1280x1024px.

Your resolution is 1600x1200px.

Your resolution is 1280x720px.

Your resolution is 1600x900px.

Device selection

This test tries to determine if you're running on a screen or projection display. In Opera, press F11 to turn the browser into projection mode.

Your browser failed to query media types

This is visible only when in normal mode

This is visible only in full-screen mode

This should be visible in both modes

This should be visible only on handheld displays

This shhould be hidden in both modes

Color selection

This test tries to determine your browsers color capabilities.

Your browser failed to query color capabilities.

You have at least 8-bit color capability

You have at least 16-bit color capability

You have at least 24-bit color capability

You have at least 32-bit color capability

You have less than 32-bit color capability

You have less than 24-bit color capability

Device DPI

This test attempts to query the DPI of your display.

Your browser failed to query DPI capabilities.

Your display has a resolution > 72dpi

Your display has a resolution < 1200dpi

Scan

This test tries to determine whether you're using a scanline type display, or a device with progressive scanning.

Your browser failed to determine scanning process.

You're using progressive scan.

You're using interlace technology.

Viewport width and other units

This test yields different results based on whether a block that is n em's wide would fit into the width of the display. Note that this is relative to the base font size, usually set in body { ... }.

Your browser failed to query min-width with em's

Your browser will fit 15ems wide text

Your browser will fit 30ems wide text

Your browser will fit 45ems wide text

Your browser will fit 60ems wide text

Your browser will fit 75ems wide text

That's all folks

Now, go back to Virtuelvis, or the gallery index.