Basics to media queries in CSS

I just spent a whopping 10 minutes looking for a solution to the fact that my media queries weren’t being used on a handheld.
Let me start by saying I’m updating an old website here, so there was no use of a template or any form of fancy stuff. I’m talking Notepad and handwritten code.

Old websites that have been built by hand are often not built for the web we know today. There’s no responsiveness, there’s no optimizations and certainly nothing changes for the view a handheld user is offered. Everyone gets the same information and display, no matter who you are. If you have a customer, that wishes to leave the desktop version alone (which is fine, if it’s somewhat modern and has a design, any), but wants to go big on mobile, you have some options available: either rebuild the website templates with new techniques, like Bootstrap or Boilerplate, or work with the old files. Your choice will probably depend on the budget for this job. Mine was small, so I decided to work with the old code.

As I was coding I was resizing my browser big and small, several windows with the same page aligned, differently sized to get an idea of what the website looks like on different monitors. After a while I turned on the emulator (Chrome has one built in) to see my changes a little better. The website was shown as before. I was confused. My media queries work, because as I’m resizing I see the elements bopping about, but on mobile, nothing. Emulator bug? I tried with my phone and saw the same result, the desktop version awkwardly placed on a tiny display. What was this?

I had forgotten a tag in the header. This one:

<meta name="viewport" content="width=device-width, user-scalable=no">

Most platforms and templates have this built in, to keep you safe. It doesn’t hurt to add it, but be aware of it and thank it.

More info here: http://www.quirksmode.org/mobile/metaviewport/

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top