Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

The CSS3 media query feature has led to many interesting possibilities in terms of developing websites which adjust to many different screen sizes and devices.

However, in practice, I'm starting to get the sense that the CSS3 media query feature, and the whole "Responsive Web Design" movement, may not live up to its promise.

The problem I see is that, at the end of the day, web developers care mostly about whether their users are viewing content via a Desktop, Tablet, or Mobile device. But CSS3 only provides a means to detect screen resolution. In theory, detecting screen resolution seems like a great way to adjust for various different devices. But in practice...

Suppose we have a simple Javascript function that just outputs the screen width:

function foo()
{
   alert(screen.width);
}

On my Blackberry Touch, this outputs:

768

On my Samsung Galaxy, this outputs:

800

So...um, at this point, the resolution of mainstream smart phones is getting pretty close to Desktop-level resolutions. The ability to detect whether a user is viewing your website via a smartphone, tablet, or desktop, seems to be increasingly difficult if all you're going by is screen resolution.

This makes me call into question the entire wisdom behind the whole CSS3 "Responsive Web Design" movement based on media queries. It almost seems like the media query feature is better suited towards adapting to a resizing browser window on a Desktop screen, rather than various mobile devices.

Another possible technique for detecting mobile or tablet devices is to use feature detection, by checking if the ontouchstart event is supported. But even this is becoming increasing unreliable as many Desktop screens start to support touch.

Question: So... as a web developer, if I can't rely on RWD or feature detection, is user-agent sniffing (as notoriously unreliable as always) really the best option to detect mobile devices?

share|improve this question
    
If the goal of Responsive Web Design is (as Wikipedia claims) "easy reading and navigation with a minimum of resizing, panning, and scrolling", then why do you care whether it's a desktop or a mobile? What matters is the device's screen resolution and screen size, not what type of device it is. No? –  ruakh May 24 '13 at 2:57
    
I guess what I'm saying is that the connection between "screen resolution" and actual screen size (e.g. centimeters/inches of screen width) is becoming increasingly transient. –  Channel72 May 24 '13 at 2:58
    
___________________ –  poke May 24 '13 at 3:45
    
I thought you're supposed to do something with the device-width media query because the width/resolution is becoming increasingly inaccurate especially with pixel density of various displays e.g. Apple's "Retina" devices. So then if the device width is within the general width for a mobile device then you show a different layout. For an tablet/desktop user I just show the same layout ie 1024px wide. –  zuallauz May 24 '13 at 6:11
    
@zuallauz, isn't support for device-width pretty bad? –  Channel72 May 24 '13 at 14:37
show 2 more comments

3 Answers

Stop worrying so much about specific devices.

The ability to detect whether a user is viewing your website via a smartphone, tablet, or desktop, seems to be increasingly difficult if all you're going by is screen resolution

It is getting increasingly difficult to detect via screen resolution, and it will only get harder as more devices enter the market, but the purpose of media queries is not to detect device types.What media queries are good at is making tweaks to your design when it is no longer pleasant to use at the current dimensions. If the site starts to fall apart at 550px wide, then it doesn't matter if there's a device with those dimensions or not: you set the breakpoint there.

Its the same deal with feature detection. If the device supports touch, then what does it matter if it's a mobile device or some future wall-sized monitor? Either way the touch enhancements will probably be useful.

User-agent sniffing - as you've stated - is completely unreliable. I could change my User-agent string to Shakespeare quotes if I really wanted too. What would your site decide about my browser then?

User agents also require a lot of work to handle all the possibilities. Do you have one for Firefox on android? Chrome on IOS? Dolphin on Froyo? The WiiU Browser? The extremely limited browser on my old LG feature phone? Lynx? IE 13? Links? IceWeasel? The Blackberry playbook's browser? How are you telling the difference between Opera running on a tablet and opera running on a phone?

This list can only grow as time goes on.

share|improve this answer
    
Well, a 1-column layout usually lends itself well to smartphones. For a tablet, you can get away with a 2 column or even 3 column layout, and for Desktops typically 3 columns works fine. Regardless, the ideal number of columns you display is typically a function of the biological capabilities of the human eye, rather than screen resolution. My point is that it would be nice if there was a tighter correlation between screen resolution and the likelihood that a typical human will be able to easily scan your site visually. At least, CSS3 seems to assume such a correlation. –  Channel72 May 24 '13 at 3:51
    
There's supposed to be, actually. CSS pixels are supposed to be defined using angles and distances not physical pixels. Many manufactures are ignoring this in their default settings though. –  Mike Gossmann May 24 '13 at 3:57
    
@Channel72 A 1-column layout lends itself well to any narrow screen width. It hardly matters whether the screen width is narrow because it's a smartphone browser, or a desktop browser in a re-sized window on a giant monitor. Responsive web design attempts to accommodate all scenarios appropriately, regardless of user agent. –  Eric King May 24 '13 at 18:20
add comment

User agents lie, too. If you Google around, you'll find lists of user agents vs reality. So this is a problem. Some resort to looking at the dpi setting to determine which or what kind of device it is.

share|improve this answer
add comment

even css 2.1 has the media values of screen, handheld or print ! Isn't that going to be enough to decide how to serve your website's content? Sorry if I missed the point:

http://www.w3.org/TR/CSS21/media.html

share|improve this answer
    
helps to quote the relevant pieces just in case the link goes dead. –  jwenting Jun 19 at 11:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.