我如何使这个JavaScript只适用于最小宽度为1036px的浏览器上的用户

How do I make this JavaScript only work for users on browsers with a min-width of 1036px?

本文关键字：1036px 浏览器 用户 最小宽度 适用于 何使这 JavaScript      更新时间：2023-09-26

在下面的代码中，我想让columnWidth 240仅在浏览器上查看站点时使用最小宽度为1036px。所以，一般只适用于桌面用户。对于任何浏览器宽度低于1036px，我希望columnWidth为320。这可能吗?

if(jQuery().isotope) {
    $container = jQuery('.home #masonry');
    $container.imagesLoaded( function() {
        $container.isotope({
            itemSelector : '.item',
            masonry: {
                columnWidth: 240
            },
            getSortData: {
                order: function($elem) {
                    return parseInt($elem.attr('data-order'));
                }
            },
            sortBy: 'order'
        }, function() {
            // Isotope Chrome Fix   
            setTimeout(function () {        
                jQuery('.home #masonry').isotope('reLayout');   
            }, 1000);
        });

    }); 
    // filter items when filter link is clicked
    $container = jQuery('#masonry');
    jQuery('#filter li').click(function(){
        jQuery('#filter li').removeClass('active');
        jQuery(this).addClass('active');
        var selector = jQuery(this).find('a').attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });

}

你在问两件事，如何找出屏幕大小和如何使它为你的代码工作。

对于屏幕大小，您可以使用screen对象(全局作用域)，因此screen.width是屏幕的宽度。或者你可以使用outerWidth或innerWidth，它们应该返回与window相关的大小(尽管它们有自己的怪癖)。

现在，关于你的问题，owwyess建议你混合javascript和json符号这是不可能的，所以你应该做一些像

 masonry: {
     columnWidth: screen.width >= 1036 ? 240 : 320
 }

(如果你不知道语法，它被称为三元运算符，通过它进入谷歌)

嗯，我认为你不能检查屏幕大小?(不确定)，但浏览器的大小是这样做的，(如果它也适合你的需要):

if ($(window).width() < 1024) { // foo } else { // bar }

如果有帮助的话，你也可以尝试将$(window).width()更改为:

$(document).width()

$('body').width()

代码:

if(jQuery().isotope) {
    $container = jQuery('.home #masonry');
    $container.imagesLoaded( function() {
        $container.isotope({
            itemSelector : '.item',
            masonry: {
               $(window).resize(function() {
                if (screen.width >= 1036) {
                columnWidth: 240
                } else {
                columnWidth: 320
                }
               });
            },
            getSortData: {
                order: function($elem) {
                    return parseInt($elem.attr('data-order'));
                }
            },
            sortBy: 'order'
        }, function() {
            // Isotope Chrome Fix   
            setTimeout(function () {        
                jQuery('.home #masonry').isotope('reLayout');   
            }, 1000);
        });

    }); 
    // filter items when filter link is clicked
    $container = jQuery('#masonry');
    jQuery('#filter li').click(function(){
        jQuery('#filter li').removeClass('active');
        jQuery(this).addClass('active');
        var selector = jQuery(this).find('a').attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });

}
相关文章：