CSS3媒体查询 - 不以某些浏览器中工作（正式支持MQ）(CSS3 Media Queries -

请告诉我 - 在我犯了一个错误，为什么页面显示在Opera Mini的无媒体查询？

的jsfiddle - http://jsfiddle.net/vhCLs/

要么

cssdesk - http://cssdesk.com/fPS2s

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
    .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;}
    }
</style>
<div class="gogogo"></div>
</body>
</html>

它是如何工作 - 拉屏幕的宽度，你会发现块的反应（会变色）

UPD：我发现了一个跨浏览器的解决方案，当然这是非常不理想的，没有充分覆盖整个动物园旧的浏览器...

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <meta name="viewport" content="width=device-width; initial-scale=1.0">

Answer 1:

Opera Mini的是代理浏览器 -它的工作原理不同于普通的浏览器。最初的JavaScript将运行，但绑定到调整事件的功能不这样做，因为页面呈现在代理和某种静态的位图发送到手机上。它并不意味着是互动的，它只是意味着要快。很多低级别又名功能手机使用的Opera Mini作为他们的浏览器。如果你有一部iPhone，你可以去歌剧院现场安装的Opera Mini的iPhone进行测试。我也注意到在iPhone上，基于此视口的高度是不准确的运行Opera Mini的测试页。您可能需要从外部文件加载你的CSS对CSS3-mediaqueries-JS工作。