0

タブレットを縦向きから横向きに、またはその逆に切り替えるときに問題が発生し、タブレットは jQuery コードを再実行しません。

シナリオは次のとおりです。

<div class="links">
  <ul class="hide">
    <li></li>
  </ul>
</div>

最初は、ul 要素はCSSによって隠されています。次に、このコードがクリックイベントで開かれるようにします。

if ($(window).width() <= 800) { // portrait orientation
    $(".links").click(function() {
       $(this).find('ul').slideToggle();
    });
}

これまでのところうまくいきます。何もクリックしなくても、ランドスケープに切り替え続けても問題なく動作します。問題は、縦向きで要素をクリックして開き、もう一度クリックして閉じるときに発生します。

2 回目のクリックの後、ul要素が追加されたようです (最初はCSSstyle="display:none"によって処理されるため、これはありません)。これが、ランドスケープに戻ると要素が非表示になった理由です。次に、このコードを以下に示してみました。ul

if ($(window).width() > 800) { // landscape orientation
    if ($('.links ul').is(":hidden")) {
        $('.links ul').css("display","block");
    }
}

ただし、ul要素を非表示にして横向きに切り替えるたびに、このコードが実行されなかったようです。向きを切り替えるたびにブラウザがコードを実行するようにするための回避策はありますか?

4

3 に答える 3

3

.resize() jQuery handler画面のサイズ変更時にウィンドウの高さを確認するために使用できます。

$(document).ready(function(){
    $(window).resize(function()
    {
        if ($(window).width() > 800)
        { // landscape orientation
            if ($('.links ul').is(":hidden"))
            {
                $('.links ul').css("display","block");
            }
        }
    });
});
于 2013-08-21T06:14:00.217 に答える
1

ブラウザのサポート要件によっては、 と を組み合わせて使用​​できorientation changeますmatchMedia。

MDNによると: window.matchMediaモバイル サポートは妥当です:

Feature        Android   Firefox Mobile (Gecko)   IE Mobile      Opera Mobile   Safari Mobile
Basic support      3.0              6.0 (6.0)     Not supported          12.1        5

必要に応じて、いくつかのマッチメディア ポリフィルも利用できます。

これを組み合わせると、orientationchange次のようなことができます。

window.addEventListener("orientationchange", function(evt) {
    if (window.matchMedia("(min-width: 400px)").matches) {
      /* the view port is at least 400 pixels wide */
    } else {
      /* the view port is less than 400 pixels wide */
    }    
}, false);

これにより、向きの変更を適切に制御できるようになります。

追加のライブラリを使用したい場合は、Enquire.jsが一致するイベントと一致しないイベントの両方をサポートしています。これは小さく、jQuery は必要ありません。

于 2013-08-21T06:27:49.277 に答える
0

次のようなイベント リスナーを設定できます。

window.addEventListener("orientationchange", function() {
    alert("orientationchange");
}, false);
于 2013-08-21T06:08:48.270 に答える