Lately, I’ve been curious how media queries work on different devices. I set up a quick test page to initially test embedded and external media queries and min/max width medias. As I got into developing my test, I decided to also test support for all of the current CSS media types such as; all, screen, handheld, and so on. Also, I set up some tests for all of the current CSS media query features, such as color, orientation, aspect-ratio, etc.
We need more tests!
How do you pseudo?
One thing I’ve always been curious of is how well pseudo element support is on mobile devices; :before, ::before, :after, ::after. So I set up a test to add text based content with those pseudo elements, and also test to add a .jpg with the pseudo elements.
False positives and JS media query test ideas.
It seems modernizr will sometimes return a false postive on touch support, so I added a field to manually enter if the device supports touch. Other manual tests include; physical keyboard, web browser, and device name.
My little test for media queries quickly morphed into a full fledged device capability test.
Originally, I planned to manually enter support for my media query test, but turned to the
matchMedia() function to help ease data collection. Unfortunately, it is not currently supported on a wide range of mobile devices so I sought to figure out another way to automatically collect that data.
My media query tests work be setting all mqs test to display none by default, and then sets them to display:block; if the media query is true. I decided to use JS to test if a element was visable, based on the media query and this proved to be a wider supported alternative to
The device capability test.
So, without any further ado, I present my device capability test -
Check it out on your phone, tablet, computer or whatever web enabled device you have and submit your tests. Also, be sure to test in portrait and landscape! Some devices I’d really like to get results for are the Kindle Fire, and original Kindle. I’m curious how Silk works on the Kindle Fire and if the monochrome mqs feature will work on the original Kindle. Also, I’m looking for some results from other uncommon web enabled devices, like the Sony PSP, the WII, the Playstation 3, and for some odd reason, Microsoft Kin phones. So do the web a favor, and submit you test results!
The test results.
You can also check out the results I’ve collected so far here:
I’ve currently tested a ton of Android tablets, an iPhone, iPod, iPad, a Logitech Revue, and a ton of other devices, so do check out the results. All the test I’ve done so far have been done on the stock browser of the device. I’ve done some testing on my Android phone in some of the other browsers available in the Android Market.
You can view those results here:
Notes about the test and it’s results.
All the tests were done with the HTML5 doctype with the meta view port set to:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
Due to the massive amount of data collected, I had to do some trickery with the table that displays the results, so it is currently best viewed in Google Chrome. You can view it in Firefox, IE, or other browsers, but the scroll bar on the bottom can be a little difficult to work with.