2012-04-20 11 views
1

私は間違いをどこで犯したのですか?ページが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"> 
+0

使用しているOpera Miniのバージョンは何ですか? http://caniuse.com/css-mediaqueries – Greg

+0

私はモバイルエミュレータをチェックします - http://www.opera.com/developer/tools/mobile/ このエミュレータは、多くのウェブサイトが正しく表示されます - 例えばhttp:// mediaqueri .es/ – user1103744

+1

これはOpera Miniで動作します:iOS 5.1とAndroid 2.3 – mddw

答えて

3

Opera Miniは異なり、通常のブラウザよりも動作します-it proxy browserです...もちろんそれが理想からかけ離れていると、完全に全体の動物園古いブラウザをカバーしていない、クロスブラウザの解決策を見つけました。初期JavaScriptは実行されますが、サイズ変更イベントにバインドされた関数はプロキシでレンダリングされ、電話機に何らかの静的ビットマップで送信されるため、機能はバインドされません。これはインタラクティブなものではありません。これは単なる高速化のためのものです。多くの低レベルのa.k.a.フィーチャーフォンは、ブラウザとしてOpera Miniを使用しています。 iPhoneをお持ちの場合は、Opera siteに行き、テスト目的でiPhone用のOpera Miniをインストールしてください。私はまた、iPhone上でOpera Miniを実行していることに気付きました。これは、test pageに基づいてビューポートの高さが正確ではないことに気付きました。 css3-mediaqueries-jsが動作するには、外部ファイルからCSSをロードする必要があります。

1

特徴検出にはModernizrを使用してください。 Opera Mini 5-7とIE 8+はMediaクエリをサポートする唯一のバージョンです。そのため、Modernizrは、JavaScript主導の機能検出を通じて、経験をより細かく制御できます。

関連する問題