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.)

回答1:

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.

来源：https://stackoverflow.com/questions/10185904/media-queries-in-opera-mini-incorrect-display

标签

mobile

css

media-queries

opera-mini