Blackberry Specific Media Queries

We all know that on the better preforming smartphones, such as IOS and Androids based devices, media queries are a dream and seem to work very well.

However, once we take out that blackberry and load the page… Its easy to see that something is not working correctly. Here at responsive we faced a challenge.  Take the Blackberry 8520 for example. It has a screen resolution of 320 x 240. Normally one would just make a media query like this:

@media only screen and (max-height: 320px){


The only issue is that the iPhone portrait height is this. Anything you do the the blackberry’s media query like this will also affect how an iPhone will display it.

You can target the blackberry device individually (sort of) by targeting the width and the height of the device.

Below the media queries for the newer blackberry devices.

/* Blackberry 8520 */
	@media only screen and (max-height: 240px) and (max-width: 320px)

/* Blackberry Strom Storm/2 Landscape */
	@media only screen and (max-height: 360px) and (max-width: 480px)

/* Blackberry Strom Storm/2 Portrait */
	@media only screen and (max-height: 480px) and (max-width: 360px)

/* Blackberry Bold 9000*/
	@media only screen and (max-height: 320px) and (max-width: 480px)

/* Blackberry Bold 9700 */
	@media only screen and (max-height: 480px) and (max-width: 360px)

/* Blackberry Bold 9900 (Touch) */
	@media only screen and (max-height: 480px) and (max-width: 640px)

/* Blackberry Torch 8900 Portrait*/
	@media only screen and (max-height: 480px) and (max-width: 360px)

/* Blackberry Bold 9810 Portrait*/
	@media only screen and (max-height: 640px) and (max-width: 480px)

/* Blackberry Bold 9860 Portrait*/
	@media only screen and (max-height: 800px) and (max-width: 480px)

Leave a Reply

Your email address will not be published. Required fields are marked *