CSS3 媒体查询 - 在某些浏览器中不起作用（官方支持 MQ）答案

【问题标题】：CSS3 Media Queries - does not work in some browsers (officially supporting MQ)CSS3 媒体查询 - 在某些浏览器中不起作用（官方支持 MQ）
【发布时间】：2012-05-02 01:53:33
【问题描述】：

请告诉我——我在哪里出错以及为什么页面在没有媒体查询的情况下显示在 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>

它是如何工作的 - 拉动屏幕宽度，你会注意到块的反应（它会改变颜色）

统一更新： 找到了一个跨浏览器的解决方案，当然还很不理想，也没有完全覆盖整个动物园的老浏览器……

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

【问题讨论】：

您使用的是哪个版本的 Opera Mini？ caniuse.com/css-mediaqueries
我检查了手机模拟器-opera.com/developer/tools/mobile这个模拟器，很多网站都能正常显示-比如mediaqueri.es
嗯，它适用于这些 Opera Mini：iOS 5.1 & Android 2.3

标签： html css media-queries responsive-design

【解决方案1】：

Opera Mini 是proxy browser——它的工作方式与普通浏览器不同。初始 JavaScript 将运行，但绑定到调整大小事件的函数不会运行，因为页面在代理上呈现并以某种静态位图发送到手机。它并不意味着是交互式的——它只是意味着快速。许多较低级别的功能手机使用 Opera Mini 作为浏览器。如果您有 iPhone，您可以转到Opera site 并安装 Opera Mini for iPhone 以进行测试。我还注意到在 iPhone 上运行 Opera Mini 时，基于 test page 的视口高度并不准确。您可能需要从外部文件加载 CSS，css3-mediaqueries-js 才能工作。

【讨论】：

【解决方案2】：

使用Modernizr 进行特征检测。 Opera Mini 5-7 和 IE 8+ 是唯一支持媒体查询的版本。因此，Modernizr 通过 JavaScript 驱动的特征检测让您可以更好地控制体验。

【讨论】：