Opera mini 中的媒体查询 - 显示不正确 [英] Media queries in Opera mini - incorrect display

问题描述

为什么这个 CSS 在 Opera mini 中不起作用?

.gogogo{height:50px;width:100%;}@media 屏幕和 (min-width:100px){.gogogo {背景色:红色；}}@media 屏幕和 (min-width:320px){.gogogo {背景颜色:橙色；}}@media 屏幕和 (min-width:480px){.gogogo {背景颜色:橙色；}}@media 屏幕和 (min-width:600px){.gogogo {背景颜色:黄绿色；}}@media 屏幕和 (min-width:768px){.gogogo {背景色:绿色；}}

HTML:

JSFiddle、CSSDesk

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

解决方案

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

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

解决方案

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.

这篇关于Opera mini 中的媒体查询 - 显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！