mobile - Opera mini 中的媒体查询 - 显示不正确

Question

为什么这个 CSS 在 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

我不只是问这个问题，因为 this site在里面工作得很好……也许他们使用 javascript 来检测分辨率和其他东西？ (我试图在源代码中找到它，但我没有找到。)

Answer 1

Opera Mini 是一个瘦客户端，它接收在 Opera 服务器上预编译的“智能”图像 (OBML)。当你输入一个地址时，你手机上的瘦客户端将它发送到 Opera 服务器，Opera 服务器向远程服务器发出真正的 HTTP 请求。然后 Opera 服务器收到响应，创建图像并将其发送回瘦客户端。所以就其本身而言，没有 css、html、js 到达瘦客户端。只是 OBML 图像。因此，当您更改设备的方向时，您需要重新加载页面才能生效。这是节省带宽 (80%) 和设备上的实时交互之间的权衡。