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

我不只是在问这个问题，因为这个网站在其中运行得很好……也许他们使用 javascript 来检测分辨率和其他东西？（我试图在源代码中找到它，但我的搜索不成功。）

Answer 1

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