Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Posts: 19
Registered: ‎02-14-2013
My Device: 9360
My Carrier: du

@media different css for different screen sizes

I am using different css for different screen sizes using media queries.


@media only screen and (width: 480px) and (height:360px) {




@media only screen and (width: 640px) and (height:480px) {






@media only screen and (max-width: 640px) and (max-height:480px) {




@media only screen and (max-width: 640px) and (max-height:480px) {





It works in ripple emulator fine but not working on the devices. When I start using device-width or max-device-width  it starts working on device. how to overcome this? I dont wont to change the css again and again to switch between ripple emulator and device.


Also can anyone tell me what are the different number of possiblities  for different screen sizes? so I can create different css for all different sizes?



New Developer
Posts: 11
Registered: ‎11-22-2012
My Device: Bold 9900
My Carrier: Aircel

Re: @media different css for different screen sizes

Oh my dear friend thanks a lot for your question. I was just breaking my head why does media query which work on browser doesn't work on device.


After i saw your question i just added "device" in my media query then it started working.


Though i am not replying your question fully i have answer for part of your question.

Here are different device orientaions which blackberry has..(7.0 and 6.0's )

I don't have resolution for playbook's etc.




9930 - 480X640
9650 - 480X360
9790 - 480X360
9700 - 480X360
9670 - 360X400 (flip)
9300 - 320X240
9780 - 480X360 (6.0)
9900 - 480X640 (7.0) (

Posts: 107
Registered: ‎06-12-2012
My Device: Dev Alpha C, Playbook
My Carrier: Loop

Re: @media different css for different screen sizes

Screen resolution for Playbook is 1024 x 600. Z10 is 1280 x 768 and Q10 is 720x720
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
Posts: 1,230
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: @media different css for different screen sizes

Just guessing here - the following may fix you


This one really messed with my brain


When you switch from Portrait to Landscape the device alters the DPR


As such is is vital to include the meta viewport tag with zoom set to 1.0 and user-scalable set to no


What happens without that step is that the device keeps the same vertical height and adjusts the width which completely throws everything off


It seems likely that this is the case of your issue

Click the like button if you find my posts useful!