如何使此JavaScript僅適用於最小寬度為1036px的瀏覽器上的用戶？

Question

在下面的代碼中，僅當在最小寬度為1036px的瀏覽器中查看網站時，我才想使columnWidth 240。 因此，通常僅適用於台式機用戶。 對於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;

    });


}

Answer 1

您在問兩件事，如何找出屏幕尺寸以及如何使其適用於您的代碼。

對於屏幕大小，可以使用screen對象（全局范圍），因此screen.width是屏幕的寬度。 或者，您可以使用outerWidth或innerWidth ，它們應該返回與window相關的大小（盡管它們有其怪異之處）。

現在，關於您的問題，owwyess建議您將javascript和json表示法混合使用，這是不可能的，因此您應該執行以下操作

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

（如果您不知道語法，則將其稱為三元運算符，只需將其輸入到Google）

Answer 2

嗯，我認為您不能檢查屏幕尺寸嗎？（不確定），但是瀏覽器的尺寸是這樣完成的（如果也適合您的需要）：

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;

    });


}