<< The new iPads and our websites | Home | Internet Explorer 10 is out >>

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.

Tags : , ,

Re: CSS3 Media Query Testbed

Thanks a lot saved me tons of time!
Avatar: pieroxy

Re: CSS3 Media Query Testbed

Why visitors still make use of to read news papers when in this technological globe everything is accessible on net?
Avatar: pieroxy

Re: CSS3 Media Query Testbed

I am curious to find out what blog platform you happen to be working with? I'm experiencing some small security problems with my latest blog and I'd like to find something more safeguarded. Do you have any suggestions?
Avatar: pieroxy

Re: CSS3 Media Query Testbed

Someone essentially assist to make significantly posts I would state. That is the first time I frequented your web page and thus far? I surprised with the research you made to create this actual publish extraordinary. Excellent process!
Avatar: pieroxy

Re: CSS3 Media Query Testbed

This post gives clear idea for the new visitors of blogging, that truly how to do blogging.
Avatar: Evden Eve Nakliye

Re: CSS3 Media Query Testbed

Good way of describing, and good piece of writing to get data about my presentation topic, which i am going to convey in academy.
Avatar: ghaziabad escort service

Re: CSS3 Media Query Testbed

Nice post. I was checking constantly this blog and I am impressed! Very helpful information specifically the last part : ) I care for such info a lot. I was seeking this certain info for a very ling time. Thank you and good luck. my web-site; ghaziabad escort service