CSS Media Queries - Please advise

Mobile
1

Hi,

Why doesn’t unitcoins.us display correctly on a mobile phone?

I followed the instructions presented in this article about adding CSS Media Queries to the bottom of my style sheet:

Here’s the CSS…

@media only screen and (max-device-width: 480px) {
#wrapper {
    width: 400px;
    } 
#header {
        background-image: url(images/mobile-header.png)
        height: 54px;
        position: relative;
    }
 
#header h1 {
            font-size: 140%;
    }

#content {
        float: none;
        width: 100%;
    }
     
#navigation {
        float:none;
        width: auto;
    }
#footer {    
    display: none;
          }
}

Please advise

2

There’s the catch. Most mobiles don’t yet recognize media queries. Just the iPhone and a few others maybe.

Check out this slideshow for more info:

Rethinking the Mobile Web by Yiibu

It provides a nice way to cater for all devices.

3

Thanks Ralph.

Basically I narrowed the page width to 400px, reduced content width, and used display:none to remove large banners. Most pages look fine on my iPod however not sure about other devices.

4

Just be aware that mobiles still have to download that stuff, even if it’s not visible. Ideally, place any decorative content in the CSS and serve a different style sheet to mobiles so they don’t download unnecessary stuff.

Most pages look fine on my iPod however not sure about other devices.

Here is one testing device, though not sure how good it is:
mobiReady - dotMobi compliance & mobileOK checker

Mobile testing is a tough gig, which is why it’s safest to serve really simple styles to all devices, and then serve pretty @media styles to those that can handle them.

5

Ralph…Thanks for the tips

Any idea what phones support CSS Media Queries?
I’m hoping adding CSS is enough to satisfy my clients.
Having a lot of trouble finding good online emulators…tried the one you mentioned.

6

TBH, I’m not sure if any phone other than the iPhone supports @media. The Yiibu link I posted above gives some data on that.

7

It’s not the phone who supports the media queries, it’s the browser.

And many phones run Opera (Mobile or Mini) or some version of Webkit (iWhatevers, Android, Symbian on Nokia).

But if you try the Yiibu way (basic sheet everyone gets is mobile-friendly) then you don’t have to worry about anyone supporting media queries really except IE (and you end up sending the “desktop” stylesheet to all IE’s under 9, sucks for Windows Mobile users but whatever)… unless this site is expecting some older graphical browsers.

8

My strategy with mobile devices is to detect them in the http header via the server and then either switch the theme if I’m using a CMS or feed them a different stylesheet if it’s a simple page or two that needs to be accessed.

I’ve used MobileESP and I’m pretty happy with it (they have cripts to detect on the server or the client, depending on what you need): The MobileESP Project: Easily detect mobile web site visitors » About MobileESP