How to increase font size on just blackberries that have small screens with physical keyboards?

Problem

I made a mobile web application that looks good in all the different smart phones (iphone, windows, blackberry and android) under any orientation except the blackberry that has a small screen with a physical keyboard. On this particular blackberry, the font size is too small. What is a good way apply different styles or make fonts bigger on just these types of blackberries?

Note My app looks great on blackberries that have full screens with virtual keyboards. It looks great in portrait and landscape. So any solution I use to target the blackberries with small screens + physical keyboard must not interfere with the operation/cosmetics of the blackberries with full screens.

Problem courtesy of: John

Solution

The best way to solve your issue is to decide what physical criteria determines when you need to use a larger font and then test for that specific criteria. It is best if you do NOT try to detect what type of device is hosting the page, but detect some characteristic of the device.

For example, you could decide that if the screen size is smaller than a x b, then you need to change the font size. To do something like that, you could use a media query that was entirely CSS that set a different font size when certain screen size conditions where true.

I suspect that the issue is NOT that the device has a keyboard, but rather the constraints on the screen size that having a physical keyboard causes. So, you should NOT focus on what type of device it is or whether it has a keyboard, but rather on what the screen dimensions are that cause you to need a different design. Then, key your CSS/HTML or even javascript to detect that screen size and adapt accordingly.

If you decide that CSS media queries might be a useful approach, you will have to make sure that the target devices you most want this fix on support the particular CSS media queries you choose to use.

Here are some examples of how CSS media queries work:

http://css-tricks.com/css-media-queries/

Here's another SO post that talks about optimizing for display on Blackberries and testing:

Blackberry media query

Solution courtesy of: jfriend00

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.