私は間違いをどこで犯したのですか?ページがMedia QueriesなしでOpera Miniに表示される理由を教えてください。CSS3 Media Queries - いくつかのブラウザ(正式にMQをサポートしています)で動作しません
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: 私は
<!--[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のバージョンは何ですか? http://caniuse.com/css-mediaqueries – Greg
私はモバイルエミュレータをチェックします - http://www.opera.com/developer/tools/mobile/ このエミュレータは、多くのウェブサイトが正しく表示されます - 例えばhttp:// mediaqueri .es/ – user1103744
これはOpera Miniで動作します:iOS 5.1とAndroid 2.3 – mddw