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.
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 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
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.
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.
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.
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
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
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
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.
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
Now, go back to Virtuelvis, or the gallery index.