Mobile browsers, you suck (or: RTFM CSS media type)

23 11 | 2012

Mobile browsers, you suck (or: RTFM CSS media type)

Written by Tanguy

Classified in : Homepage, Debian, Miscellaneous, Grumble

Mobile devices

A number of people are using small mobile devices to read Web pages. These devices have small screens, which make it hard to read pages designed for a large screen width.

CSS Media types to the rescue

Good news: the W3C thought of that fourteen years ago, when they introduced the concept of media types in CSS 2:

<link rel="stylesheet" type="text/css" media="handheld"/>

Here, the attribute media="handheld" indicates this dedicated style sheet should be loaded by “hand-held devices (typically small screen, limited bandwidth)” (quoting the CSS 2.1 Specification). Cool stuff, for a specification written in 1998, is it not?

… or not

Well, bad news: mobile browsers do not honour it. Try this test page with a hand-held device: if the browser respects the specification, it should display a section of text which is not shown for regular browsers. It probably wont.

So, how do people do to implement a specific style for mobile devices? Well, the W3C seemed to acknowledge the fact that mobile browser authors had no intention of respecting the existing specification, so they extended it with Media Queries:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"/>

Here, this attribute indicates this dedicated style sheet is to be loaded by devices with a screen not too large (in pixels: not sure how this would work with small but high resolution screens). Thank you, mobile browsers, for not implementing a specification that was designed just for you before you even existed, and requiring such a kludge with a new specification instead…

Tags : mobile, device, Web, browser, sucks, page, CSS, stylesheet, media, type

12 comments

friday 23 november 2012 à 13:01 Screwtape said : #1

There's a reason why browsers do that. Back in the day, Apple was the first company to ship a mobile browser that was in any way comparable to a desktop browser; they discovered that if they honoured media="handheld" then sites would send the browser incredibly simplified and crippled styles, and made users assume that the browser was much more limited than it really was, so they decided not to honour media="handheld".

And so, all the smartphones that came afterward copied Apple for compatibility reasons...

friday 23 november 2012 à 13:49 Claudius said : #2

Opera Mobile implements this quite nicely for me here. If I enable the "Single Column View", it chooses the handheld option, if I disable the single-column view, it chooses the "regular" screen option, thus allowing me to access the website as I would on a standard PC (and possibly zoom/pan).

friday 23 november 2012 à 14:12 Riku Voipio said : #3

Separate handheld CSS file is bad idea - as the first poster said, people with highend mobile (5" iphone, 7" nexus tablet) will hate you for showing a mobile site. What you want is scaling css, aka responsive web design. Go to http://yle.fi/news and resize the browser to different widths.

The magic is precisely using the media query max-device-width and resolution to decide what elements are visible on the page.

friday 23 november 2012 à 14:16 Tanguy said : #4

@Riku Voipio : I do not think they would hate me for that, given the love they show for dedicated applications which are often just ways to show a website.

But now, about scaling, I am sceptical too, because my example page is an example of something perfectly scalable since it contains nothing but paragraphs of text. And guess what? Mobile browser show it with a fixed, large width, requiring to zoom and scroll horizontally, which one of the worst reading experiences possible. I have no problem designing scalable or reflowable Web sites, but these Web browsers do not implement that either!

friday 23 november 2012 à 17:41 guy said : #5

As Claudius said, Opera does allow rescaling, and is the only mobile browser I've seen do that. Many many sites break when you start scaling fonts or changing the width, even on desktop machines. Frankly the web developers should fix them but obviously most companies shipping browsers aren't prepared to take the blame. Maybe we should all flock to opera...

As for mobile-specific presentation: wikipedia (and quite a few other sites) do have mobile-specific versions which work nicely (even on a 5" screen the full version would be horrible).

friday 23 november 2012 à 19:17 niq said : #6

Just tested my nokia E6, and it shows both 'handheld' and 'screen'.

I think on balance both of those are correct. It is a handheld device, and it is a visual screen. And - in common with many modern handheld devices - it's a 640x480 screen, which puts it in the same ballpark as a regular desktop screen back in 1998. Indeed, 640 pixels is more width than I'd've given any browser back then.

friday 23 november 2012 à 20:29 Emanuele Aina said : #7

*DON'T* use "max-device-width", use "max-width" instead: it just cares for the viewport size, it handles roation just fine and it's also easier to test (just resize your desktop browser window)!

Also, avoid separate stylesheets (they just increase the load time, and will get downloaded even if the query does not match).

Last, you can also use the "em" unit for your media queries, so that you can say "if the viewport has not enough space for a text line of 60 charactes, change layout".

friday 23 november 2012 à 20:30 Emanuele Aina said : #8

Oh, and don't forget <meta name="viewport" content="width=device-width" /> in the <head> tag!

friday 23 november 2012 à 22:43 Tanguy said : #9

@Emanuele Aina : What it that meta tag? A way to tell the browser that your website, contrary to most ones which are badly designed, supports variable width?

sunday 25 november 2012 à 01:59 MJ Ray said : #10

I hate getting mobile versions of most sites too. Just serve the site and let the browser deal with it. Sometimes I want to zoom and pan - other times I want it reformatted into one column. Just use markup properly and no one will get hurt.

And I HATE mobile wikipedia. If it actually respected the "permanently disable" instead of expiring every so often, I'd be quite happy.

monday 26 november 2012 à 16:36 agence web said : #11

Forget about meta tags and prefer the @media coupled with size query (my opinion).

thursday 22 january 2015 à 22:53 Jens Oliver Meiert said : #12

Well, authors never used handheld it was barely supported, and manufacturers never supported it because it was barely used. [1]

[1] http://meiert.com/en/blog/20090630/handheld-media-type-rip/

Rss feed of the article's comments

Tanguy Ortolo