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.
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.
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:
Here's another SO post that talks about optimizing for display on Blackberries and testing:
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.