CSS3 媒体查询 - 在某些浏览器中不起作用(官方支持 MQ) [英] CSS3 Media Queries - does not work in some browsers (officially supporting MQ)

查看：25
本文介绍了CSS3 媒体查询 - 在某些浏览器中不起作用(官方支持 MQ)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

或

cssdesk - http://cssdesk.com/fPS2s

<html lang="en-US"><头><meta charset="UTF-8"><title></title><身体><style type="text/css">.gogogo{height:50px;width:100%;}@media 屏幕和 (min-width:100px){.gogogo {背景色:红色；}}@media 屏幕和 (min-width:320px){.gogogo {背景颜色:橙色；}}@media 屏幕和 (min-width:480px){.gogogo {背景颜色:橙色；}}@media 屏幕和 (min-width:600px){.gogogo {背景颜色:黄绿色；}}@media 屏幕和 (min-width:768px){.gogogo {背景颜色:绿色；}}</风格><div class="gogogo"></div>

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

UPD:我找到了一个跨浏览器的解决方案，当然它远非理想，并没有完全覆盖整个动物园旧浏览器......

 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--[如果是 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 是一个代理浏览器——它的工作方式与普通浏览器不同.初始 JavaScript 将运行，但绑定到调整大小事件的函数不会运行，因为页面在代理上呈现并以某种静态位图发送到手机.它并不意味着是交互式的——它只是为了快速.许多低级功能手机使用 Opera Mini 作为浏览器.如果您有 iPhone，您可以访问 Opera 网站 并为 iPhone 安装 Opera Mini 进行测试目的.我还注意到在 iPhone 上运行 Opera Mini 时，根据此 测试页面.您可能需要从 css3-mediaqueries-js 上班.

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/

or

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

解决方案

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.

这篇关于CSS3 媒体查询 - 在某些浏览器中不起作用(官方支持 MQ)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆