3

CSS ですべてのモバイル デバイスの向きを取得し、向きの変更でいくつかの CSS をトリガーしようとしています。

これはコードの簡単なテストです:

    <div class="orientation">
        <span class="landscape">Landscape</span>
        <span class="portrait">Portrait</span>
    </div>

CSSは次のとおりです。

     .portrait, .landscape {
         position: absolute;
         top: 0px;
         left: 0px;
     }

    .portrait {display: block;}
    .landscape {display: none;}

    @media screen and (orientation:landscape) {
        .portrait {display: none;}
        .landscape {display: block;}
    }

現在、すべての Webkit ブラウザー (android、ios) およびデスクトップでさえ正常に動作します (いくつかのデバイスを除く) が、新しい Windows Phone 8 デバイスでは変更を反映しません。(ノキア ルミア 920)

私はまた、いくつかのJavaScriptリソースを見てきました（ただし、私はJavaScriptの専門家ではありません）。

しかし、私が知る限り、それはまだ Windows Phone 8 デバイスでは機能しませんか?

使用する必要がある特定の MS css コードはありますか、それとも別の方法がありますか? クロス ブラウザー/クロス モバイル デバイス対応の JavaScript があれば、変更を取得して、変更時に body タグにクラスを追加するだけで済みます。

どんな助けでも大歓迎です。ありがとう！

4

3 に答える 3

2
于 2012-12-03T21:19:00.427 に答える
1

このブログ エントリによると、Web ページをローカルで表示すると、IE はデフォルトでイントラネット サイトの下位互換モードになります。これがおそらく意図したとおりに動作しない原因です。次のメタ タグを追加することで修正できます。

<meta http-equiv="x-ua-compatible" content="IE=edge" />
于 2013-01-07T19:38:26.930 に答える