Question

我需要让这个脚本在宽度为794像素或更高的屏幕尺寸上运行。对于较小的屏幕尺寸，它不应该运行，因为这会使另一个脚本出现问题。

我尝试了不同的东西，但我真的不知道如何实现这一目标。

jQuery(document).ready(function ($) {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

任何人都可以告诉我，我怎么调整这个让这个脚本只能在794像素或更高的屏幕宽度上运行？

祝你好运 Safak

Answer 1

您可以在javascript中使用window.matchMedia()进行媒体查询。

例如

var mq = window.matchMedia( "(max-width: 570px)" );
if (mq.matches) {
    // window width is at less than 570px
}
else {
    // window width is greater than 570px
}

对于网络浏览器支持：请参阅 “https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/”

<强>更新

如果您只想运行一次脚本而不是调整大小，可以使用

if($(window).width()>=794)
{
    //do your stuffs here
}

Answer 2

使用jQuery：

$(function(){
    $( window ).resize(function(){
        if( $( window ).width() >= 794 ){
            // Your code here
        }
    });   
    $( window ).resize();    // Trigger window resize to check on load
});

Answer 3

您可以使用window.width()

<强>例如：

if(!$(window).width()<794)
{
    //do your stuffs here
}

Answer 4

使用$(window).width()

$product->rows

Answer 5

非jQuery解决方案看起来像这样

if (window.innerWidth > 794) {
   myFunc(); //the code that you want to run on bigger screens
}

Answer 6

jQuery(document).ready(function ($) {
$('a[href*=#]:not([href=#])').click(function () {
    if( $(window).width() >= 794 )
    {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
    }//window size check ends here
});

}）;

不同屏幕尺寸的Javascript

6 个答案: