Welcome!

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

Reply
Contributor
faizandedia
Posts: 19
Registered: ‎02-14-2013
My Device: 9360

@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) {

 

}

 

or

 

@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?

 

Thanks

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

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.

 

heightXwidth

 

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

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

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.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

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!