Mobile site CSS with CSS3 media queries (Mobilizing websites with responsive design and HTML5 part 5)

Posted on by

This blog post is a part of Mobilizing websites with responsive design and HTML5 tutorial. For all posts please see the Introduction post.

To mobilize the legacy website, we create a responsive design with two layout steps: desktop and mobile. We use a separate mobile.css stylesheet which will override legacy desktop styles for mobile browsers with more suitable variations for small screens.

CSS3 Media queries are a method of selectively loading CSS stylesheets based on various criteria like screen size and orientation. They are supported by all state-of-the-art mobile and desktop browsers.

mobile.css stylesheet

  • is loaded for mobile devices only using CSS3 media queries
  • when developing, we force the file to be loaded on our development browser (Firefox + Firebug) simply by removing the media query condition in the stylesheet HTML tag

1. Defining the media query to discriminate mobile devices

The media query uses simple screen pixel count to determine whether the screen is “small” or not. Though CSS3 has rapidly advanced, it still cannot answer the basic question “what is the diameter of the screen in physical inches”, the only information which we would be interested in. Thus, some heuristics are required to guess whether the screen is actually small or not… hopefully we’ll see some kind of pixel size + DPI or diameter in inches selectors in the future CSS media queries to make hacks unnecessary.

Note: In the case related to this tutorial, the client wanted the tablet browsers to receive mobile styling also. This improved touch screen accessibility, though the tablet browsers usually work well with desktop layouts too.

Note: Media queries determine the screen width by the device orientation and you can have different CSS loaded depending whether the device is in portrait or landscape orientation mode.

Note: Browsers report their screen width in heterogeneous manner. Whether reported widths are the virtual screen width in virtual pixels or the real pixel width may vary browser by browser. See notes below.

Note: WebKit has a WebKit specific media query selector called -webkit-device-pixel-ratio which tells ratio between physical and virtual pixels. It is designed to discriminate high DPI mobile screens, which are wider than 640 pixels but still in small form factor.

CSS3 media query linking code for loading the mobile.css stylesheet in HTML <head>:

   <!--
     Detect mobile devices + iPad.

     High DPI smart phones report "virtual" pixels here which is usually 1/2 x normal pixels.
     E.g. iPhone 4 with 960 px wide screen reports 480 pixels.
     We use 500 px as the threshold.

     We cut out devices at 900 pixels wide, so 1024 px desktop screens are not included.

   -->

   <link rel="stylesheet" media="screen and (max-device-width: 900px)" href="css/mobile.css" />

   <!--

     This is for Android.

     Android Browser HPDI screens uses actual pixels max-device-width and
     they are indistinguishable from iPad. The screen can have max-device-width=768
     which is also the value for tablets.

     Here we simply use WebKit HDPI screen "virtual pixel" aspect ratio detector
     to see if we are using virtual pixels. If we are then assume a mobile screen.

   -->

   <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="css/mobile.css" />

To test the mobile styles in a deskto browser simply remove media condition from <link> code.

The project page before mobile CSS was applied:

The page after mobile CSS has been applied:

Much better!

Note: Older mobile browsers might not support CSS3 media queries. They will simply fallback to the desktop version of the site CSS, no harm done.

Resetting desktop styles

The most important task for the mobile.css to do is to reset the website width and main content wrapping from the hardcoded centered column to something spreading across the whole mobile screen width.

Here are some example styles we applied in mobile.css to drop hardcoded width values and adjust margins to more suitable values. As you can see we use !important CSS directive to override many desktop styles – if your site is using several CSS files or complex style hierarchies this switch might be needed to make sure styles are overridden properly.

/* Disable background image */
body {
    background: white !important;
}

/* Fill entire mobile viewport width - don't force hard pixel widths*/
#visual-portal-wrapper {
    width: 100% !important; /* Was width: 960px */
    margin: 0;
}

#main-margin {
     margin: 0;
}

/* Mobile footer cannot be fixed height as it may layout as many rows
   instead of one */
#footer2 {
    width: 100% !important;
    margin: 0;
    padding: 0;
    height: auto; /* Was 60px */
}

/* Fix footer margins */
#footer-wrapper {
    padding: 10px 20px 0 20px;
}

/* Make two footer elements reactive and lay from top to bottom on too narrow screen */
#footer-wrapper > div {
   display: block;
   float; left;
}

#footer-wrapper > a {
   width: 120px;
}

2. More information

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

8 thoughts on “Mobile site CSS with CSS3 media queries (Mobilizing websites with responsive design and HTML5 part 5)”

  1. This article is just what I was looking for. An up-to-date way of dealing with mobile CSS. Thank you!

  2. Pingback: Responsive design workflow using two browsers

  3. Thanks, This is a perfect tutorial. Thanks for your contribution.
    I have a small question, why have you used
    #footer-wrapper > a {
    width: 120px;
    finally?
    you are giving fixed width?

  6. #footer-wrapper > a {
    width: 120px;

    see the last code you published.
    why have you used a fixed width of 120 px for anchor tag?

  7. Aaaah, got it!

    It’s to make the link click area larger and create so called “tile link”.

    The user does not need to hit text, just generally around the link bounding box.

Leave a Reply

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