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 : css, design, web

Responses[98]

Posted by pieroxy on October 24, 2012 7:36:00 AM PDT #

Re: CSS3 Media Query Testbed

Comment from Anonymous on October 7, 2013 1:48:21 PM PDT #

Thanks a lot saved me tons of time!

Re: CSS3 Media Query Testbed

Comment from pieroxy on September 19, 2023 12:19:51 AM PDT #

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

Re: CSS3 Media Query Testbed

Comment from pieroxy on September 19, 2023 7:00:12 AM PDT #

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?

Re: CSS3 Media Query Testbed

Comment from pieroxy on September 19, 2023 7:12:59 AM PDT #

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!

Re: CSS3 Media Query Testbed

Comment from pieroxy on September 19, 2023 7:41:01 AM PDT #

This post gives clear idea for the new visitors of blogging, that truly how to do blogging.

Re: CSS3 Media Query Testbed

Comment from Evden Eve Nakliye on September 19, 2023 1:16:34 PM PDT #

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

Re: CSS3 Media Query Testbed

Comment from ghaziabad escort service on September 20, 2023 4:36:01 AM PDT #

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

Re: CSS3 Media Query Testbed

Comment from Therese on October 19, 2023 12:30:39 AM PDT #

It's a shame you don't have a donate button! I'd definitely donate to this outstanding blog! I guess for now i'll settle for bookmarking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this site with my Facebook group. Talk soon!

fipsyinx

Comment from Ashetell on December 3, 2023 3:04:32 PM PST #

doxycycline for sale

hpytifph

Comment from DavidPrevy on December 3, 2023 6:27:14 PM PST #

where can i get gabapentin

cneqfrvl

Comment from Elwoodparee on December 4, 2023 2:13:16 PM PST #

order accutane over the counter

cneqfrvl

Comment from Elsa on December 24, 2023 5:27:15 PM PST #

Good information. Lucky me I found your website by chance (stumbleupon). I've book marked it for later!

cneqfrvl

Comment from Lukas on December 25, 2023 4:31:51 PM PST #

I was curious if you ever thought of changing the page layout of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or two pictures. Maybe you could space it out better?

cneqfrvl

Comment from Val on December 25, 2023 6:11:08 PM PST #

You've made some decent points there. I checked on the internet for more information about the issue and found most people will go along with your views on this site.

cneqfrvl

Comment from Akilah on December 28, 2023 6:13:33 PM PST #

It's difficult to find knowledgeable people about this subject, but you seem like you know what you're talking about! Thanks

cneqfrvl

Comment from https://sites.google.com/view/balakrishnan-real-estate-group/real-estates on January 8, 2024 9:23:52 AM PST #

I'm gone to say to my little brother, that he should also pay a quick visit this website on regular basis to get updated from most up-to-date news.

cneqfrvl

Comment from here on January 8, 2024 1:32:05 PM PST #

Ahaa, its nice conversation concerning this piece of writing at this place at this webpage, I have read all that, so now me also commenting here.

cneqfrvl

Comment from Valorie on January 11, 2024 12:05:56 AM PST #

Yes! Finally something about have a peek at this web-site.

cneqfrvl

Comment from continue reading this on January 11, 2024 2:48:41 AM PST #

It's an remarkable piece of writing in favor of all the online people; they will obtain advantage from it I am sure.

hdrnmhqn

Comment from Eyeetell on December 4, 2023 10:23:08 PM PST #

doxycycline tablets online

ajuejpgl

Comment from Samuellinny on December 5, 2023 4:15:03 AM PST #

colchicine acute gout

ajuejpgl

Comment from Tommie on December 20, 2023 10:08:24 PM PST #

It's remarkable to pay a quick visit this web page and reading the views of all mates concerning this piece of writing, while I am also eager of getting knowledge.

ajuejpgl

Comment from Sue on December 20, 2023 10:46:40 PM PST #

Everything is very open with a precise explanation of the challenges. It was really informative. Your site is extremely helpful. Many thanks for sharing!

ajuejpgl

Comment from Bob on December 21, 2023 12:36:35 AM PST #

It's the best time to make a few plans for the longer term and it's time to be happy. I've learn this put up and if I may I want to recommend you some attention-grabbing things or advice. Perhaps you can write next articles relating to this article. I wish to learn more things about it!

ajuejpgl

Comment from https://bbarlock.com/ on December 22, 2023 12:14:44 AM PST #

I'm curious to find out what blog platform you have been using? I'm experiencing some minor security problems with my latest blog and I'd like to find something more secure. Do you have any suggestions?

ajuejpgl

Comment from Nickolas on December 24, 2023 6:04:38 PM PST #

I know this if off topic but I'm looking into starting my own blog and was curious what all is required to get set up? I'm assuming having a blog like yours would cost a pretty penny? I'm not very internet savvy so I'm not 100% sure. Any tips or advice would be greatly appreciated. Cheers

ajuejpgl

Comment from Sammie on December 24, 2023 6:43:06 PM PST #

If some one needs expert view concerning blogging then i advise him/her to pay a visit this web site, Keep up the good job.

ajuejpgl

Comment from click4r.com on December 24, 2023 7:51:39 PM PST #

Do you have a spam problem on this site; I also am a blogger, and I was wanting to know your situation; we have created some nice procedures and we are looking to exchange techniques with others, be sure to shoot me an e-mail if interested.

ajuejpgl

Comment from Ali on December 24, 2023 9:34:01 PM PST #

Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?

ajuejpgl

Comment from Hung on December 24, 2023 10:04:14 PM PST #

Hi colleagues, its impressive piece of writing about teachingand entirely explained, keep it up all the time.

ajuejpgl

Comment from Lavina on December 24, 2023 11:25:12 PM PST #

Truly when someone doesn't understand then its up to other viewers that they will help, so here it occurs.

ajuejpgl

Comment from Bradly on December 25, 2023 1:05:00 AM PST #

Aw, this was a very good post. Taking the time and actual effort to create a great article… but what can I say… I put things off a whole lot and don't seem to get nearly anything done.

ajuejpgl

Comment from Fiona on December 25, 2023 6:07:44 PM PST #

What's up, just wanted to tell you, I enjoyed this blog post. It was inspiring. Keep on posting!

ajuejpgl

Comment from Damian on December 25, 2023 6:18:11 PM PST #

Spot on with this write-up, I actually believe this amazing site needs a great deal more attention. I'll probably be returning to read through more, thanks for the information!

ajuejpgl

Comment from Cecila on December 25, 2023 7:26:33 PM PST #

I am regular reader, how are you everybody? This paragraph posted at this web page is actually pleasant.

ajuejpgl

Comment from Thaddeus on December 25, 2023 8:00:26 PM PST #

You are so cool! I do not suppose I've read something like that before. So nice to find another person with a few original thoughts on this subject. Really.. thank you for starting this up. This web site is something that is required on the web, someone with some originality!

ajuejpgl

Comment from Jami on December 25, 2023 10:55:33 PM PST #

Peculiar article, just what I wanted to find.

ajuejpgl

Comment from Adeline on December 26, 2023 12:14:43 AM PST #

You actually make it seem so easy with your presentation but I find this topic to be actually something that I think I would never understand. It seems too complicated and extremely broad for me. I am looking forward for your next post, I will try to get the hang of it!

ajuejpgl

Comment from Penney on December 26, 2023 1:03:48 AM PST #

I really like looking through a post that can make men and women think. Also, thank you for allowing me to comment!

ajuejpgl

Comment from Irish on December 26, 2023 6:29:47 PM PST #

Good day very nice site!! Guy .. Excellent .. Amazing .. I will bookmark your web site and take the feeds additionally? I am satisfied to search out numerous helpful information right here within the submit, we want develop more techniques in this regard, thanks for sharing. . . . . .

ajuejpgl

Comment from visit the website on December 26, 2023 6:30:43 PM PST #

Paragraph writing is also a excitement, if you be acquainted with afterward you can write otherwise it is complicated to write.

ajuejpgl

Comment from pastelink.net on December 26, 2023 6:35:06 PM PST #

Excellent pieces. Keep writing such kind of information on your blog. Im really impressed by your blog. Hi there, You have performed an incredible job. I'll certainly digg it and in my opinion suggest to my friends. I am confident they will be benefited from this site.

ajuejpgl

Comment from visit homepage on December 26, 2023 6:59:27 PM PST #

Great post.

ajuejpgl

Comment from Muoi on December 26, 2023 7:18:57 PM PST #

Pretty! This was an incredibly wonderful article. Thank you for providing these details.

ajuejpgl

Comment from Derick on December 26, 2023 8:21:25 PM PST #

I like it when people get together and share thoughts. Great blog, stick with it!

ajuejpgl

Comment from Minerva on December 26, 2023 8:49:24 PM PST #

Heya i am for the primary time here. I came across this board and I to find It really helpful & it helped me out much. I'm hoping to present something back and help others such as you aided me.

ajuejpgl

Comment from Casie on December 26, 2023 9:23:32 PM PST #

Excellent post. I absolutely love this website. Thanks!

ajuejpgl

Comment from Adalberto on December 26, 2023 10:16:16 PM PST #

This is a topic that is close to my heart... Best wishes! Exactly where are your contact details though?

ajuejpgl

Comment from wiki-quicky.win on December 26, 2023 10:47:28 PM PST #

Hey very interesting blog!

ajuejpgl

Comment from Nicole on December 26, 2023 10:50:01 PM PST #

I enjoy reading through an article that can make men and women think. Also, thank you for allowing me to comment!

ajuejpgl

Comment from Lucille on December 26, 2023 11:44:26 PM PST #

of course like your web site however you have to check the spelling on several of your posts. Many of them are rife with spelling problems and I in finding it very troublesome to inform the reality nevertheless I'll surely come again again.

ajuejpgl

Comment from Marisa on December 26, 2023 11:50:16 PM PST #

I believe this is among the such a lot significant information for me. And i am happy studying your article. But want to statement on few basic issues, The web site style is perfect, the articles is truly excellent : D. Excellent activity, cheers

ajuejpgl

Comment from Tammie on December 27, 2023 10:08:43 PM PST #

Having read this I believed it was rather enlightening. I appreciate you spending some time and effort to put this short article together. I once again find myself personally spending a lot of time both reading and leaving comments. But so what, it was still worth it!

ajuejpgl

Comment from Antje on January 4, 2024 12:36:34 PM PST #

Hi there mates, its wonderful piece of writing about educationand entirely explained, keep it up all the time.

ajuejpgl

Comment from sites.google.com on January 5, 2024 1:07:12 PM PST #

There is certainly a great deal to know about this issue. I love all the points you made.

ajuejpgl

Comment from website link on January 8, 2024 12:10:47 PM PST #

Greetings from Colorado! I'm bored at work so I decided to check out your website on my iphone during lunch break. I love the knowledge you present here and can't wait to take a look when I get home. I'm surprised at how quick your blog loaded on my phone .. I'm not even using WIFI, just 3G .. Anyhow, wonderful blog!

ajuejpgl

Comment from go to the website on January 8, 2024 2:00:52 PM PST #

I’m not that much of a internet reader to be honest but your sites really nice, keep it up! I'll go ahead and bookmark your website to come back in the future. Many thanks

rcmkbimi

Comment from Elwoodparee on December 6, 2023 12:52:59 AM PST #

trazodone 319

rgdnnzrsj

Comment from Maryetell on December 9, 2023 10:34:40 PM PST #

xenical medicine online

rnkdjkhq

Comment from Curtissor on December 11, 2023 4:53:21 PM PST #

lyrica 200 mg capsule

sudbplah

Comment from Eyeetell on December 12, 2023 5:22:22 PM PST #

paxil sleepiness

zkddkqcl

Comment from DavidPrevy on December 12, 2023 8:12:02 PM PST #

synthroid 125 mcg tab

nryixkii

Comment from Josephfeshy on December 14, 2023 2:17:18 AM PST #

prednisone 10mg tablet cost

oshvmzzy

Comment from DarrylDraks on December 16, 2023 3:56:49 AM PST #

amoxicillin 25 mg

mufttgzj

Comment from Elwoodparee on December 18, 2023 9:21:49 PM PST #

phenergan tablets over the counter

ktshwabq

Comment from Ashetell on December 19, 2023 3:25:55 PM PST #

buy ventolin online usa

hykbfkgy

Comment from Elwoodparee on December 20, 2023 9:01:20 AM PST #

order vardenafil

qiqxtzut

Comment from DavidPrevy on December 20, 2023 1:01:39 PM PST #

amoxicillin 875 mg tablet

uzgwpway

Comment from WilliamGIZ on December 20, 2023 1:03:57 PM PST #

propranolol buy no prescription

dqrlukhb

Comment from Curtissor on December 26, 2023 12:19:01 PM PST #

orlistat price canada

revtdcbhg

Comment from Maryetell on December 29, 2023 5:27:18 PM PST #

diflucan without prescription

bpluywwx

Comment from MichaelRon on December 31, 2023 12:32:22 AM PST #

baclofen medicine

ydvbrdno

Comment from DarrylDraks on January 1, 2024 1:45:15 AM PST #

albuterol tabs without prescription

ngrdterw

Comment from Josephfeshy on January 1, 2024 2:18:21 PM PST #

clonidine 0.1 mg online

mvalfvvz

Comment from Curtissor on January 1, 2024 3:54:20 PM PST #

how much is amoxicillin prescription

exvixgif

Comment from Elwoodparee on January 2, 2024 11:35:34 PM PST #

cost of colchicine

qaydqxht

Comment from Elwoodparee on January 4, 2024 4:11:58 PM PST #

order propecia online australia

hfpotqwe

Comment from Ashetell on January 7, 2024 4:07:49 AM PST #

citalopram 30 mg

eapcgfyh

Comment from DavidPrevy on January 7, 2024 12:00:05 PM PST #

fildena 100 mg price

Re: CSS3 Media Query Testbed

Comment from Evden Eve Nakliye on November 23, 2023 7:39:57 PM PST #

Hey There. I found your blog using msn. This is a very well written article. I'll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will definitely return.

Re: CSS3 Media Query Testbed

Comment from Bats Knife MM2 Value on December 27, 2023 10:05:01 AM PST #

Hi there friends, its great piece of writing regarding teachingand completely explained, keep it up all the time.

Re: CSS3 Media Query Testbed

Comment from Ashley on December 28, 2023 6:08:53 PM PST #

I do not even understand how I ended up right here, but I assumed this put up used to be great. I don't realize who you're but definitely you're going to a well-known blogger in case you aren't already. Cheers!

Re: CSS3 Media Query Testbed

Comment from Earnestine on December 28, 2023 6:10:41 PM PST #

Hey There. I found your blog the usage of msn. This is a very smartly written article. I will be sure to bookmark it and come back to read more of your helpful info. Thank you for the post. I'll certainly comeback.

Re: CSS3 Media Query Testbed

Comment from 8bitknifemm2database.wordpress.com on December 28, 2023 6:32:11 PM PST #

I'm gone to inform my little brother, that he should also pay a quick visit this blog on regular basis to get updated from latest news.

Re: CSS3 Media Query Testbed

Comment from apocalypse knife murder mystery 2 on December 28, 2023 7:22:04 PM PST #

Today, I went to the beach front with my children. I found a sea shell and gave it to my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!

Re: CSS3 Media Query Testbed

Comment from mm2aurora2019depot.wordpress.com on January 5, 2024 7:27:17 PM PST #

Very quickly this website will be famous amid all blog users, due to it's good content

Re: CSS3 Media Query Testbed

Comment from candycorn2020mm2tradeinsights.wordpress.com on January 10, 2024 8:42:03 AM PST #

I read this paragraph completely about the resemblance of most up-to-date and earlier technologies, it's remarkable article.

Re: CSS3 Media Query Testbed

Comment from Buy Camo MM2 on January 10, 2024 9:37:21 AM PST #

Ahaa, its pleasant dialogue regarding this article at this place at this weblog, I have read all that, so at this time me also commenting at this place.

Re: CSS3 Media Query Testbed

Comment from Candleflame Knife MM2 on January 10, 2024 12:08:21 PM PST #

You've made some good points there. I looked on the web for more information about the issue and found most people will go along with your views on this web site.

Re: CSS3 Media Query Testbed

Comment from Candleflame MM2 on January 10, 2024 3:25:40 PM PST #

I'm not sure where you're getting your info, but great topic. I needs to spend some time learning much more or understanding more. Thanks for excellent info I was looking for this info for my mission.

Re: CSS3 Media Query Testbed

Comment from Elvia on January 10, 2024 7:13:30 PM PST #

Hello, Neat post. There's an issue with your web site in web explorer, would test this? IE nonetheless is the market leader and a huge part of other people will leave out your wonderful writing because of this problem.

Re: CSS3 Media Query Testbed

Comment from Brush Knife MM2 on January 10, 2024 7:25:37 PM PST #

I was recommended this blog via my cousin. I am now not sure whether or not this put up is written by him as no one else realize such detailed about my difficulty. You're incredible! Thank you!

Re: CSS3 Media Query Testbed

Comment from Candy Corn 2022 Knife MM2 Value on January 10, 2024 8:55:35 PM PST #

We stumbled over here from a different web page and thought I may as well check things out. I like what I see so now i am following you. Look forward to looking into your web page yet again.

Re: CSS3 Media Query Testbed

Comment from Buy Candleflame Knife MM2 on January 11, 2024 8:43:18 AM PST #

I have learn several good stuff here. Definitely value bookmarking for revisiting. I wonder how much attempt you put to make this sort of magnificent informative website.

Re: CSS3 Media Query Testbed

Comment from Buy Camo MM2 on January 11, 2024 9:46:38 AM PST #

This design is wicked! You obviously know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Wonderful job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

Re: CSS3 Media Query Testbed

Comment from Kathryn on January 11, 2024 10:39:16 AM PST #

Your mode of explaining everything in this piece of writing is genuinely nice, all can effortlessly be aware of it, Thanks a lot.

Re: CSS3 Media Query Testbed

Comment from Camo MM2 on January 11, 2024 11:16:22 AM PST #

Hmm it seems like your blog ate my first comment (it was super long) so I guess I'll just sum it up what I submitted and say, I'm thoroughly enjoying your blog. I as well am an aspiring blog writer but I'm still new to the whole thing. Do you have any points for novice blog writers? I'd really appreciate it.

Re: CSS3 Media Query Testbed

Comment from Buy Bunny Knife MM2 on January 11, 2024 11:29:05 AM PST #

Hey! Quick question that's entirely off topic. Do you know how to make your site mobile friendly? My site looks weird when viewing from my apple iphone. I'm trying to find a theme or plugin that might be able to correct this problem. If you have any suggestions, please share. Cheers!

Add a comment

Re: CSS3 Media Query Testbed Comment from Anonymous on May 2, 2024 1:34:10 AM PDT #
Title
Body	HTML : b, strong, i, em, blockquote, br, p, pre, a href="", ul, ol, li, sub, sup
OpenID Login	(Not me?)
Name
E-mail address
Website
Remember me	Yes No
E-mail addresses are not publicly displayed, so please only leave your e-mail address if you would like to be notified when new comments are added to this blog entry (you can opt-out later).