intertwingly

It’s just data

Media Dependent Styling


I finally decided to upgrade my cell phone to one that supports the web and email.  I settled on an LG enV3 in slate blue.  One of the pages I frequently check is my comments page, and as I had taken care to ensure that the markup degraded gracefully, the page displays adequately on my mobile device — with one obvious annoyance that surprised me.

To read the comments, I have to horizontally scroll.  Usability significantly improves if I add the following to my CSS:

body {width:320px}

Now, clearly I don’t want all user agents to format the page with a 320px width.  My preferred approach would be to solve this in the CSS.  The first thing I tried was media="handheld", but sadly the results showed that this was ignored.

I tried Media Queries, but they too were ignored.  This opens up the possibility of styling by default a limited width and only utilizing the full width on browsers that support Media Queries.  Firefox 3.5 being one such browser.  Firefox 3.0.11 doesn’t have such support.  My conclusion is that this isn’t widely enough supported for me to depend on it.

I may end up having to do conneg.  Available headers include:

HTTP_X_WAP_PROFILE: "http://uaprof.vtext.com/lg/vx9200/vx9200.xml"
HTTP_ACCEPT_CHARSET: utf-8, utf-16, us-ascii, iso-8859-1
HTTP_USER_AGENT: Mozilla/5.0 (compatible; Teleca Q7; Brew 3.1.5; U; en) 320X240 LGE VX9200
HTTP_VIA: 1.1 Comverse 4.5
HTTP_ACCEPT: text/html, application/xhtml+xml, multipart/mixed, multipart/related, */*
HTTP_ACCEPT_LANGUAGE: en; q=1.0, en, *; q=0.5
HTTP_ACCEPT_ENCODING': gzip, deflate