2012-10-09

Getting responsive design to work

I was recently working on a web site and wanted to make it work across several mobile devices. In my case I was testing on an iPhone 4, Android Tablet and an Android phone. So no big deal, I created three different CSS files to cover the range of devices, namely phones, tablets and PC. The low level details are that you create the different CSS files and then specify which one to use based on the screen size using CSS media queries, like so:

<link rel="stylesheet" media="all and (max-width: 320px)" href="site-max320.css"/>
<link rel="stylesheet" media="all and (min-width: 361px) and (max-width: 800px)" href="selene-max800.css"/>
<link rel="stylesheet" media="all and (min-width: 801px)" href="selene.css"/>

However, once I started testing on the phone and tablet something wasn't working right. It was like the mobile browsers were ignoring the media queries; they were auto-zooming out to display the web site in its entirety, which was not what I wanted. After some googling, I discovered that you have to tell the browsers scale the content to the width of the screen, this way the media queries will be taken into effect. To accomplish this, you have to put the viewport meta data tag in the head of your HTML document, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>

Once I added this meta data tag, it all worked as expected :) A more detailed explanation about this meta data tag can be found here.

1 comment:

Anonymous said...

Howdy! This is my first visit to your blog! We are a
group of volunteers and starting a new initiative in a community in the same niche.
Your blog provided us useful information to work on. You have done a extraordinary
job!
Feel free to surf my website Income Infuser Review