1

请告诉我 - 我在哪里犯了错误以及为什么页面在没有媒体查询的情况下显示在 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： 我找到了一个跨浏览器的解决方案，当然还很不理想，并没有完全覆盖整个动物园的老浏览器……</p> 

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

2 回答 2

3

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

于 2012-04-20T15:39:35.793 回答
1

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

于 2013-02-23T06:20:46.403 回答