仅当屏幕上 <1000 像素时才调用 JS 函数

Question

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

我需要在屏幕尺寸 < 1000 像素（iPad 垂直方向）时调用一个函数，comment/deactivate 当屏幕尺寸 > 1000 像素（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

您可以使用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 也有这篇关于识别方向变化的精彩博客 post： http://davidwalsh.name/orientation-change

Answer 2

您是说如果宽度 > 1000px，您想要禁用 DoubleTapToGo？

你用过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();
});

尚未测试，但应该可以。

仅当屏幕上 <1000 像素时才调用 JS 函数

Call a JS function only when <1000 px on screen

javascript

jquery