Question

请告诉我 - 我在哪里犯了错误以及为什么在没有媒体查询的情况下在Opera mini中显示页面？

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

或

<!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是proxy browser - 它的工作方式与常规浏览器不同。初始JavaScript将运行，但绑定到调整事件大小的函数不会，因为页面在代理上呈现并以某种静态位图发送到手机。它并不意味着是互动的 - 它只是意味着快速。许多较低级别的a.k.a.功能手机使用Opera Mini作为他们的浏览器。如果您有iPhone，可以前往Opera site并安装适用于iPhone的Opera Mini进行测试。我还注意到在iPhone上运行Opera Mini，根据此test page，视口高度不准确。您可能需要从css3-mediaqueries-js的外部文件加载CSS才能正常工作。

Answer 2

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

CSS3媒体查询 - 在某些浏览器中不起作用（正式支持MQ）

2 个答案: