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
Developer
Posts: 676
Registered: ‎05-06-2012
My Device: Dev Alpha & PlayBook
My Carrier: wifi

Media Query in Browser

This is not really a Webworks question but relates to a non-packaged website targeting users of the Z10. 

 

I'm trying to make different background for Z10 then on Desktop with the following code.

 

@media (device-aspect-ratio: 15/9) {
    html{
        background: url(images/bg2.jpg) no-repeat center center fixed;
    }
}

_________________________________________________________
co-founder of Diaree | BB Dev for PictureThis
Developer
Posts: 676
Registered: ‎05-06-2012
My Device: Dev Alpha & PlayBook
My Carrier: wifi

Re: Media Query in Browser

fixed this problem was a small typo.

Must do 15:9 not 15/9


_________________________________________________________
co-founder of Diaree | BB Dev for PictureThis
Developer
Posts: 676
Registered: ‎05-06-2012
My Device: Dev Alpha & PlayBook
My Carrier: wifi

Re: Media Query in Browser

nvm it is 15/9 not 15:9.

I thought it was working because the Z10 bg showed on Z10 but it's also showing on desktop now.
_________________________________________________________
co-founder of Diaree | BB Dev for PictureThis
Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Media Query in Browser

Are you still looking for support here, or have you resolved this?

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
Posts: 676
Registered: ‎05-06-2012
My Device: Dev Alpha & PlayBook
My Carrier: wifi

Re: Media Query in Browser

I found a work around but I still want to know if my syntax is wrong or if device-aspect-ratio is not supported on BB Browser.

@media (device-aspect-ratio: 15/9) {
html{
background: url(images/bg2.jpg) no-repeat center center fixed;
}
}
_________________________________________________________
co-founder of Diaree | BB Dev for PictureThis
Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Media Query in Browser

Your syntax does appear to be correct:

http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio

 

As an alternative, you could use the device-width and device-height properties (or width and height of viewport), I have used those before and they should be working. 

 

I'll write up a test case for the device-aspect-ratio and will submit a bug report if it is not working properly. I was under the assumption that we fully support the media queries standard, but I'll confirm and get back to you here.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.