CODEWITHSUNDEEP
mobilecssmedia-queriesopera-mini
user1103744
user1103744

Reputation: 2461

Media queries in Opera mini - incorrect display

Why does this CSS not work in Opera mini?

.gogogo{height:50px;width:100%;}
@media screen and (min-width:100px){
    .gogogo {background-color:red;}
}
@media screen and (min-width:320px){
    .gogogo {background-color:orangered;}
}
@media screen and (min-width:480px){
    .gogogo {background-color:orange;}
}
@media screen and (min-width:600px){
    .gogogo {background-color:yellowgreen;}
}
@media screen and (min-width:768px){
    .gogogo {background-color:green;}
}

HTML:

<div class="gogogo"></div>

JSFiddle, CSSDesk

I'm not just asking this question, because this site is working very well in it… Maybe they use javascript for detect resolution and other things? (I tried to find it in the source code, but my searches are unsuccessful.)

Upvotes: 1

Views: 2059

Answers (1)

karlcow
karlcow

Reputation: 6972

Opera Mini is a thin client which receives an "intelligent" image (OBML) precompiled on Opera Servers. When you enter an address, the thin client on your phone sends it to Opera servers which does the real HTTP request to the distant server. Then the Opera servers receive the response, create the image and sends it back to the thin client. So per se there is no css, html, js reaching the thin client. Just the OBML image. So when you change the orientation of the device you need to make a reload of the page to be effective. This is the trade-off in between saving bandwidth (80%) and live interactions on the device.

Upvotes: 1

Related Questions