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

Call a JS function only when <1000 px on screen

本文关键字：像素 1000 调用 函数 JS 屏幕 显示      更新时间：2023-09-26

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

我需要在屏幕尺寸为 <1000px

（iPad 垂直方向）时调用一个函数，并在屏幕尺寸> 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();
}
});

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

你的意思是你想禁用DoubleTapToGo，如果宽度>1000px？

你用过这个代码吗？那么我认为这是不可能的。您只能启用它。

--编辑--

好的，我对 doubletaptogo.js 文件进行了一个小改动。你可以在这里找到它。

现在要达到所需的效果，请执行以下操作：

$(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();
});

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

您可以使用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

相关文章：