I am working on an application that has a lot of Blackberry users (which meant that I had to get a Blackberry, but that is another story).
We are working on a full mobile version of the application, but we get 70% there by having CSS specific for the mobile via either:
- Separate style sheet via media=”": <link rel=”stylesheet” href=”…/style-handheld.css” type=”text/css” media=”handheld” />
- Within the main stylesheet: @media handheld { }
Great. Simple. We have been doing this already for print-friendly versions of the site.
Most of the work to make the site handheld friendly is just getting rid of stuff. Stuff as in navigation and extra crud. We have a lot of:
#rightbar, #xnav, .bubbles, … {
display: none;
}
Then we found out that the BB doesn’t support display. It has a pretty poor support for CSS (as seen in the dev guide).
So, there goes the simple short term solution.
Of course, we want a mobile specific site because:
- We don’t want to force the mobile to download everything (JS etc), especially with the US download speeds ;)
- We want a mobile specific UI (a la bbc.co.uk/mobile)
It will be fun to see if responds_to { … } will be enough (having a mobile setting). Then the same controller/actions can be used for HTML, Mobile site, and our XML representations.
July 14th, 2006 at 3:10 am
Hi,
you could try visibility:hidden, and set width and height to zero, as the elements will still take up space.
September 8th, 2006 at 1:06 pm
I have a similar issue, it seems handheld devices don’t think they are handhelds (including a myriad of mobile phones, blackberry’s and Palm Treos), and render the screen media type. One fix for this with my Blackberry 7130e (as I discuss http://benjudson.com/article.php?story=20060908112254395) is using Opera Mini to render the page. It realizes it is a handheld and renders the correct media type.
So to force the companies to get compliant buy phones with opera pre-installed or download opera mini.
October 13th, 2007 at 2:21 pm
You’re right up there in search results for “blackberry browser css support”, so I’ll take the trouble to correct the outdated link for RIM’s developer’s guide for future visitors:
http://www.blackberry.com/btsc/search.do?cmd=displayKC&docType=kc&externalId=SWDXCDK-002002&sliceId=&dialogID=57088505&stateId=0%200%2031265160
December 16th, 2007 at 8:32 pm
I thought it was a simple code to make a website scale to specs for an iphone or blackberry,
thats what im trying to do, but my codes not doing anything,
I have the meta tag code
if you could help that would be awesome thanks!
June 21st, 2008 at 6:46 pm
Jake: There is no secret code to magically make your site mobile-friendly. Rather, you can develop two versions of the style sheets and then link to the stylesheets using the (versus media=”screen”) syntax mentioned above. As mentioned, the problem is that some mobile devices will grab the “screen” version of the CSS, which wastes the user’s bandwidth and makes the site look like crap on the tiny screen.
June 21st, 2008 at 6:49 pm
Hmm, the HTML was chomped. It should say you use <link … media=”handheld”> (versus media=”screen”).
July 20th, 2008 at 3:49 am
thanks for your share.
October 6th, 2008 at 8:33 am
Hi,
I tried with visibility hidden and media=”handheld”. It worked fine for hiding a text content. But While trying to hide a Text box, it does not work. Is there any other solution to hide a text box ???
your positive reply will be of great help. Thanks.
October 2nd, 2009 at 5:58 am
New to web design. did a site for saint paul yellow taxi. http://www.saintpaulyellowtaxi.com shows up on a blackberry just fine. doing one for http://www.gophertaxi.com and it will not show up on a his blackberry. I used the same code as yellows why does it not display?
May 4th, 2011 at 11:39 am
Both links above for “RIM’s developer’s guide”
seem to be broken…
so for future visitors: heres a link to CSS for blackberries
http://docs.blackberry.com/en/developers/deliverables/11844/Feature_CSS_512751_11.jsp