使脚本仅在特定屏幕尺寸下工作

Question

我在使用页面构建器 Elementor 构建的 WordPress 页面正文中使用下面的代码片段。我正在使用 tabs 元素，我试图确保第一个选项卡在 768px 及以上打开但在 768px 及以下关闭。下面的脚本完美关闭了tab元素，但是一直关闭，如何确保它只在768px及以下有效？

<script> 
jQuery(document).ready(function($) { 
var delay = 10; setTimeout(function() { 
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay); 
}); 
</script>

Answer 1

Returns 浏览器视口的宽度 $( window ).width();

if ( jQuery(window).width() <= 768 ){
    //do what ever
}

所以你这样做了:

jQuery(document).ready(function($) { 
    if ( jQuery(window).width() <= 768 ){
        var delay = 10; 
        setTimeout(function() { 
            $('.elementor-tab-title').removeClass('elementor-active');
            $('.elementor-tab-content').css('display', 'none'); 
        }, delay);
    }
});

Answer 2

您可以计算视口宽度：

const vw = jQuery(window).width();

然后，

if(vw >= 768) {
   var delay = 10; setTimeout(function() { 
      $('.elementor-tab-title').removeClass('elementor-active');
      $('.elementor-tab-content').css('display', 'none'); }, delay); 
   }); 
}

Answer 3

在 Elementor，您可以通过 body 的数据属性获取设备类型（“移动设备”、“平板电脑”、“桌面设备”）：

jQuery( 'body' ).data( 'elementor-device-mode' )

使脚本仅在特定屏幕尺寸下工作

Make it so that a script only works at a certain screen size

javascript

wordpress

jquery

tabs

elementor