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
New Contributor
Posts: 3
Registered: ‎03-22-2012
My Device: developer
My Carrier: developer

@media does not work in blackberry???

Hi,

I did a page using @meda with (max-width)

and a friend that have got a blackberry told me it did not work,

so after doing many tests, using adove devie central,

and I have done a new page with only a short text in and one line of css, so there is nothing that can interfere,

and the problem seems to be blackberry doesnt understand @media at all.....

I have tried everything, to finish I have done a css file with all kind of possible @media queries and it still does not work in any blackberry devices, I just dont get it. What should I use?

 

This is .css I tested:

@media only screen and (max-width: 799px) {
p {color:#CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80px;}
}
@media all and (max-width: 799px) {
p {color:#CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80px;}
}
@media handheld and (max-width: 799px) {
p {color:#CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80px;}
}
@media screen and (max-width: 799px) {
p {color:#CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80px;}
}
@media only screen and (max-device-width: 799px) {
p {color:#CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80px;}
}
@media all and (max-device-width: 799px) {
p {color:#CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80px;}
}
@media handheld and (max-device-width: 799px) {
p {color:#CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80px;}
}
@media screen and (max-device-width: 799px) {
p {color:#CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80px;}

 

If anybody please can advice as I been days with it, and this is driving me crazy, it works perfect on Samsung, Iphone etc.

Developer
Posts: 60
Registered: ‎06-08-2011
My Device: n/a
My Carrier: n/a

Re: @media does not work in blackberry???

This works for me:

 

/* for the 9900 (640 x 480) etc*/
@media screen and (max-width: 640px)
{
    h1{font-size: 1.4em;}
 }

 

/* for the 9780 (480 x 360) etc */
@media screen and (max-width: 480px)
{

     h1 {font-size: 1.2em;}

}

New Contributor
Posts: 3
Registered: ‎03-22-2012
My Device: developer
My Carrier: developer

Re: @media does not work in blackberry???

Thanks, I dont have 9780 or 9900 however your script does not work on any blackberry device in adove device central,

which is the same as the one I used except max-width

I know there is nothing wrong with the program as most of others works perfect, except blackberry, as this morning I used a real blackberry to test.

 

I wonder do you need a particular max-width for each model?

To start with I only want to have all that is smaller than a desktop,

so only one 2cc for mobiles and one for pc.

 

 

Honestly  I just dont understand anything, maybe my models are a bit old, but the real one I tested with its about 1 year old I think and everybody dont have last model, so is there any workaround this?

Developer
Posts: 137
Registered: ‎10-26-2010
My Device: Bold 9900 + PlayBook
My Carrier: Rogers

Re: @media does not work in blackberry???

Do you know what OS version they're running? From OS5 to OS6+ the switch to a WebKit-based browser made a lot of difference in the rendering capability.
--------
Taylor Byrnes
Highlighted
New Contributor
Posts: 3
Registered: ‎03-22-2012
My Device: developer
My Carrier: developer

Re: @media does not work in blackberry???

Thanks,

Sorry, I only tested on one real Blackberry a friends, and no idea wich os, however the mobiel is about a year old.

But I have many in Adobe device central and none works,

and the ones I have are verified by Adobe and uses diferent versions, these are the ones I have:
5.0, 6.0, 4.61, 1.0, 4.71,

 

Sorry, dont understand this:
"From OS5 to OS6+ the switch to a WebKit-based browser made a lot of difference in the rendering capability. "

Do you mean people should change brower or I should do something?

If you mean change browser, well the problem is my site is comercial and I cant tell people to change browsers....

Developer
Posts: 137
Registered: ‎10-26-2010
My Device: Bold 9900 + PlayBook
My Carrier: Rogers

Re: @media does not work in blackberry???

No, I mean that BBOS changed. The OS 5 and earlier browser was pretty horrible. It was not built on a modern layout engine, the experience was like trying to browse the modern web with Netscape 4.6. From OS 6.0 onwards however a WebKit-based browser was implemented and it finally was a modern device. Given that I'd assume media queries don't work on OS 5.0 and lower, though I'm not sure.

The list you're testing with does seem old though, a very tiny number of BB users are on 4.x now, and you don't have OS 7 or 7.1.
--------
Taylor Byrnes
Contributor
Posts: 12
Registered: ‎03-07-2014
My Device: BlackBerry Developer using Phonegap
My Carrier: *

Re: @media does not work in blackberry???

[ Edited ]

Hi,

       I am working on PhoneGap for Blackberry i'm using this query,i tested it for blackberry z10 simulator(@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:768px)and (max-device-height:1080px) {}) It is working fine in my application

New Developer
Posts: 105
Registered: ‎06-11-2013
My Device: DEVELOPER
My Carrier: vodafone

Re: @media does not work in blackberry???

Hi...I too had the same expirience but the resolution index should resolve the issue.

******Blackberry Developer*******---Built for the Kill-----
#######Developer of @Sudoku#########
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: @media does not work in blackberry???

CSS media queries became supported in BlackBerry 6.0, when the WebKit rendering engine was introduced to the platform.

 

It looks like you're testing on 6+ year old hardware, which was far before that time.

 

For future reference, see how improved the newer Web browser is in terms of standards support:

http://html5test.com/compare/browser/bb-10.2/bbos-7/bbos-5.html

 

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.