基於屏幕寬度的Javascript函數

嘿，我試圖減少石工的列寬，當你得到屏幕尺寸： max-width：450px;基於屏幕寬度的Javascript函數

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.box', 
    columnWidth: 220, 
    isAnimated: !Modernizr.csstransitions, 
    isFitWidth: true 
    }); 
});

這是我的Javascript代碼。我應該添加什麼來使它在該屏幕尺寸下減少列寬？

或者如何定位與IF語句屏幕尺寸...如果屏幕尺寸小於450則「XYZ」否則上面的功能...

來源

2013-06-12 Justin Licata

這是最簡單的用CSS做的是誠實的。 –

同意羅賓。然而，一些變量可能會在JS發現有用：對於瀏覽器中的內屏幕尺寸： window.innerWidth/window.innerHeight 對於整個屏幕大小： screen.width/screen.height –

速記IF語句應該做的伎倆。從本質上講，你是說，如果文檔寬度小於450比columnWidth時被設置爲220，否則columnWidth時被設定爲110

var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
     $container.masonry({ 
          itemSelector : '.box', 
          columnWidth: ($(document).width() < 450 ? 220 : 110), 
          isAnimated: !Modernizr.csstransitions, 
          isFitWidth: true 
         }); 
     });

來源

2013-06-12 14:06:46

if(window.screen.availWidth < 450) 
{ 
    // alternative configuration here 
}

來源

2013-06-12 14:07:16

基於屏幕寬度的Javascript函數

回答

相關問題