可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Please tell me - where I made a mistake and why the page is displayed in Opera mini without Media Queries?

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>

How it works - pull the screen width and you will notice the reaction of the block (it will change color)

UPD: I found a cross-browser solution, of course it is far from ideal and does not fully cover the whole zoo old browsers…

    <!--[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">

回答1:

Opera Mini is a proxy browser—it works differently than regular browsers. Initial JavaScript will run but functions binded to resize events do not, because the page is rendered on the proxy and sent to the phone in some sort of static bitmap. It's not meant to be interactive—it's just meant to be fast. A lot of lower-level a.k.a. feature phones use Opera Mini as their browser. If you have an iPhone you can go to the Opera site and install Opera Mini for the iPhone for testing purposes. I've also noticed running Opera Mini on an iPhone that the viewport height was not accurate based on this test page. You might need to load your CSS from an external file for css3-mediaqueries-js to work.

回答2:

Use Modernizr for feature detection. Opera Mini 5-7 and IE 8+ are the only version that supports Media queries. So Modernizr gives you finer control over the experience through JavaScript-driven feature detection.