CSS3 Media Query Testbed
the web developer 101
I've written quite a few articles on the css3 media queries and I thought I'd clarify my work on the subject and give a little more info on the context of these articles.
First of all, what I wanted to do was to build a database of the various values one can expect to be supported by the various devices out there. And this is not a simple task, so I did set up a "test environment".
Some context
All this is the context I run my tests in. This is also the context in which I run my websites in. It's also incidentally the setup I encourage everyone to develop their websites with, because it's the one that gives the most control to the web designer and it also is the one that makes the browsers work in the most predictable way.
Naturally, it's the setup I used for my CSS media queries test.
The test environment
- The browser should be in strict mode (aka standards mode). This is done by defining a doctype as the very first thing in a HTML page. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Or, if you don't use XHTML:<!DOCTYPE html>More on this at quirksmode.org.
- Then, one should define a meta attribute specifying the viewport as being equal to the device size. This is done by adding a meta element to the head section of an html document. The last bit specifies on iPhones with notches that when in landscape mode the website should only use the safe area. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>More on this at Mozilla and at Apple.
- Since Microsoft likes to make things so completely screwed up, they decided that the above viewport declaration would not be enough in IE 10. So they decide to invent their very specific way of doing the very same thing, plus more useless other things. So in your CSS you should also have the following definition:
@-ms-viewport { width: device-width; }You can see the rationale behind this on msdn.
- After that, webkit must be told not to adjust sizes when switching from portrait to landscape mode. This is done by defining a CSS property for the html element. Just add the following CSS snippet to any stylesheet in your html document:
html { -webkit-text-size-adjust: 100%; }Contrary to Apple's documentation on the subject, this affects all webkit-based browsers. So you should not use the none value (this screws up zooming on the desktop browsers) but the 100% value which does the trick nicely without messing with desktop browsers.
- As a bonus, I also usually add the following meta element to everything. It makes almost no difference in terms of design, but it prevents browsers to automatically detect phone numbers in a web page. This saves client-side CPU and makes the display of numbers much more predictable, as browsers will "highlight" things they believe to be phone numbers, changing their font, colors and decoration.
<meta name="format-detection" content="telephone=no">More on this at Apple.
iOS 9
iOS 9 is out, and they changed something of importance. With the setup above, your website will not be zoomable, which is what you want because zooming in and out is a bad user experience. But, what if the content is too wide? Well, in iOS < 9, you could scroll horizontally. This is not perfect by any means, but the content is viewable.
In iOS9, it will show the whole width, zooming out your website, and the user has the ability to zoom in. This is (IMO) much worse than the iOS8 behavior.
So, you now need to be extra careful about the content. Often a simple overflow:auto is enough but your mileage may vary.
Re: CSS3 Media Query Testbed
Re: CSS3 Media Query Testbed
Re: CSS3 Media Query Testbed
Re: CSS3 Media Query Testbed
Re: CSS3 Media Query Testbed
Re: CSS3 Media Query Testbed
Re: CSS3 Media Query Testbed