Mobile device support through JavaScript and CSS

If you are in the business of designing, building or maintaining a website these days, you should also be concerned with making sure the maximum number of people are able to view the content on those sites. Meaning that if you aren’t doing something to support mobile web browsing than you are a bit behind the curve. It’s really an accessibility issue, not too far off from the ideas implemented in making websites accessible to people with disabilities. We’re just talking device accessibility, so let’s take a look at a couple of really simple ways to get this done.

JavaScript

If you go the JavaScript route, I found this little gem some time ago, that covers both the client and server side detection using JavaScript and PHP. Here is an example page of what the output looks like if your detection should fail. If you are on a mobile device, the page redirects you to the root of FloggingEnglish.com. I know some older and low-end devices may not support JavaScript, but since it’s pretty freakin’ ubiquitous these days, so I think it’s pretty safe. There are other JavaScript solutions out there, but this is one is clean, simple and easy to update.

This would be a good solution to incorporate into a Flash site as well, especially since the iPhone doesn’t support Flash yet. I know the iPhone is not the most widely used device, but that doesn’t mean you shouldn’t consider that too. With the output from the example you could place special tags or content based on the type of device, offer alternative viewing solutions for your visitors, or simply redirect to a CSS based solution for faster viewing.

CSS

Working a well written CSS style layout into your site is always an excellent option whether you’re primarily concerned about mobile devices or not, but with CSS 3 it’s becoming easier for developers to target mobile devices accurately and reliably. Media Queries are relative newcomers to the CSS scene and they are becoming more supported and in the case of Apple, the way they recommend you target the iPhone. They are currently Supported by all main stream browsers that are standards compliant, and supposedly IE is even on board with this one, but Opera, Safari and Firefox all support media queries.

So what is it then?

<link rel=”stylesheet” href=”/includes/css/mobile/screen_320.css” type=”text/css” media=”screen and (min-device-width: 320px)”>

Yup. That’s it. The above code would target any mobile device where the viewport measures 320px or wider, like the iPhone for example. Granted that’s a simplistic example, but you get the idea. Dean over at Bushido Designs posted a great article Bulletproof Mobile device detection. In fact that example doesn’t really convey the strengths of media queries and how flexible this method really is. If you take a look at the W3C recommendation, you will see the following features:

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect ratio
  • device-aspect-ratio
  • color
  • color-index
  • monchrome
  • resolution
  • scan
  • grid

So you can begin to see the strengths of this method and how it could be the key to blissful mobile CSS support. Using the color feature for example would allow you target a specific stylesheet for devices capable of rendering in color, while using aspect-ration you could target 16:9 devices as well, like the PSP (480 x 272).

Of course none of this would be an issue if Apple and Opera hadn’t decided to ignore the handheld media type with their mobile browsers. With the two biggest mobile browsers off the tabel, that pretty much renders the use of handheld useless. A move that is decidedly Microsoft-esque.

Comments are closed.