Javascript 平板电脑纵向/横向切换未重新执行jQuery？_Javascript_Jquery

Javascript 平板电脑纵向/横向切换未重新执行jQuery？

javascript jquery

Javascript 平板电脑纵向/横向切换未重新执行jQuery？,javascript,jquery,Javascript,Jquery,我在将平板电脑从纵向切换到横向时遇到问题，反之亦然，平板电脑不会重新执行jQuery代码以下是场景： <div class="links"> <ul class="hide"> <li></li> </ul> </div> 然而，每当我切换到横向时，似乎从来没有执行过这段代码，而将ul元素隐藏起来。是否有一个变通方法，以便每次我切换方向时浏览器都会执行代码您可以设置事件侦听器，例如： window.ad

我在将平板电脑从纵向切换到横向时遇到问题，反之亦然，平板电脑不会重新执行jQuery代码

以下是场景：

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

然而，每当我切换到横向时，似乎从来没有执行过这段代码，而将ul元素隐藏起来。是否有一个变通方法，以便每次我切换方向时浏览器都会执行代码

您可以设置事件侦听器，例如：

window.addEventListener("orientationchange", function() {
    alert("orientationchange");
}, false);

您可以设置事件侦听器，例如：

window.addEventListener("orientationchange", function() {
    alert("orientationchange");
}, false);

调整屏幕大小时，您可以使用

.resize（）

jQuery处理程序

检查窗口高度

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

调整屏幕大小时，您可以使用

.resize（）

jQuery处理程序

检查窗口高度

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

根据您的浏览器支持要求，您可以结合使用

方向更改

和

匹配媒体

根据移动支持的合理性：

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

根据您的需要，还提供了两种matchmedia polyfills：

如果将其与

方向更改

相结合，您可以执行以下操作：

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);

这会让你很好地控制你的方向变化

如果您愿意使用额外的库，那么它对匹配和取消匹配事件都有很好的支持。它很小，不需要jQuery。