1

教えてください-どこで間違いを犯したのか、そしてなぜページがメディアクエリなしでOperaminiに表示されるのですか？

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 を実行していることに気付きましたが、このテスト ページに基づくと、ビューポートの高さが正確ではありませんでした。css3-mediaqueries-jsを機能させるには、外部ファイルから CSS をロードする必要がある場合があります。

于 2012-04-20T15:39:35.793 に答える