Question

我已经处理了几个小时，我找不到解决方案。

我需要在屏幕尺寸为＆lt;＆lt; 1000px（iPad垂直方向），并在屏幕尺寸为＆gt;时注释/停用该功能。 1000px（iPad横向）。

我编写了以下代码，它运行良好，但是当我旋转iPad（从垂直到横向）时，该功能没有按预期进行评论。

解释起来非常复杂。希望你能理解我的问题。

$(window).ready(function(){
if ( $(window).width() > 1000) {
/*  $( '.head_bar_nav ul:has(li)' ).doubleTapToGo(); */
}
else {
$( '.head_bar_nav ul:has(li)' ).doubleTapToGo();
}
});

$(window).resize(function(){
if ( $(window).width() > 1000) {
/*  $( '.head_bar_nav ul:has(li)' ).doubleTapToGo(); */
}
else {
$( '.head_bar_nav ul:has(li)' ).doubleTapToGo();
}
});

祝你有个美好的一天，再见！

Answer 1

你的意思是你想要禁用 DoubleTapToGo如果宽度＆gt; 1000像素？

您使用this code了吗？然后我不认为这是可能的。你只能启用它。

- 编辑 -

好的，我在doubletaptogo.js文件中添加了一个小改动。你可以find it here。

现在要达到预期效果，请执行以下操作：

$(window).resize(function() {
  if ( $(window).width() > 1000) {
    $( '.head_bar_nav ul:has(li)' ).data("doubletaptogo-enabled", false);
  }
  else {
    $( '.head_bar_nav ul:has(li)' ).data("doubletaptogo-enabled", true);
  }
});

$(document).ready(function(){
  $( '.head_bar_nav ul:has(li)' )
    .data("doubletaptogo-enabled", ($(window).width() <= 1000))
    .doubleTapToGo();
});

Haven尚未测试它，但它应该可以工作。

Answer 2

您可以使用window.matchMedia，然后使用媒体查询来定位当前方向：

if (window.matchMedia("(orientation: landscape)") {
    // ...
}

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

在您提供的代码段中：

$(window).ready(function(){
    if (window.matchMedia("(orientation: landscape)") {
        /*  $( '.head_bar_nav ul:has(li)' ).doubleTapToGo(); */
    }
    else {
        $( '.head_bar_nav ul:has(li)' ).doubleTapToGo();
    }
});

$(window).resize(function(){
    if (window.matchMedia("(orientation: landscape)") {
        /*  $( '.head_bar_nav ul:has(li)' ).doubleTapToGo(); */
    }
    else {
        $( '.head_bar_nav ul:has(li)' ).doubleTapToGo();
    }
});

您还可以使用媒体查询来定位device-width，但如果您想定位方向，则最好使用orientation表达式。

还有David Walsh关于识别方向变化的好文章： http://davidwalsh.name/orientation-change

仅当屏幕上的＆lt; 1000 px时才调用JS函数

2 个答案: