Responsive Web Design

CSS media queries & viewports

2014-09-07 — Rylan Santinon

Responsive Web Design

Responsive web design is about creating sites that optimize a user's viewing experience. RWD emphasises readability, navigation and support for many kinds of devices.

When designing a web site this way, people suggest to use percents instead of pixels in the CSS. These relative units are supposed to increase flexibility. Doing user-agent detection and browser detection seem to be an unreliable way of doing responsive design and they should not be relied upon.

Media Queries

When I first learned about responsive design, I thought that it was all about @media queries. So I when I wanted to make my site look decent on my Android mobile device, I thought that I just had to put some lines in my css like this:

@media only screen and (max-width: 479px) { ... }

After doing so, reloading the page and then manually resizing the window, it looked like the content got adjusted based on the media query. But when I took my phone and went to the website, it showed the version of the site that I intended for large screen width users.

I later learned that what I was missing is the meta viewport tag.

Meta Viewport

My Android's resolution in portrait mode is 320x640 but what was happening is that unless the viewport is explicitly set, the Android Chrome browser was acting like it had a 980px width.

So I put the following meta viewport statement into my <head> and then it seemed to work fine on my mobile device.

<meta name="viewport" content="width=device-width">