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">
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
