Minimum Smartphone Screen Width and best strategy

Mobile
1

Hi guys,

I have recently opened the pandora’s box of responsive design and although I am a strong CSS developer, I have had to learn mobile/tablet development on the fly, just haven’t had the time to hit the books as much as I normally would due to vast workloads so I want to just describe what I am doing and to pick your brains.

So anyway I am going with mainly media query based designs and I have a choice of have 2 queries that I have been using for mobile lately,



@media only screen and (max-width: 767px) {

 #tagline .row .eightcol {
width: 97%;
}

}

OR…



@media only screen and (min-width: 480px) and (max-width: 767px) {

 #tagline .row .eightcol {
width: 97%;
}


}

Now I am wondering if the second one is even relevant because surely the smallest device I should really care about is something like a smaller screen smartphone, maybe something like 3" display. Anything smaller would be such an inferior device(like a tiny Nokia) that people wouldn’t want to browse the web much anyway, am I right or should I use the second query above and then have one below that again to target the really tiny devices?

I suppose its maybe how long is a piece of string and how much is someone paying you but atm I am just using the below 767px one and all Smartphones (that I have seen anyway) look fine.

Your advice is much appreciated. :wink:

2

I should also add that I am not taking into account portrait and landscape on mobile , the sites I am doing will work on either, they are not complex enough to worry so its not that I haven’t considered it, its just that I want a reliable media query for mobile and to do that I need to know what other developers do about REALLY small screens. :wink:

3

It varies as per the phone’s default viewport settings. This is not, per se, WebKit’s doing, but rather the implementation of the browser on the device. Here are some default layout widths: Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

You could check into these for more info: http://www.quirksmode.org/mobile/viewports.html & http://www.quirksmode.org/mobile/viewports2.html