我的脚本运行完美，直到我将其包装在if（screen.width <980）{}语句中以检查屏幕大小

Question

@约翰

好吧，我有大于号的混合。 简单的事情....我要做的是让codeMagic（）在页面加载时运行，如果browser.width（）> 941px，如果页面调整大小<941px停止codeMagic（）运行。 如果页面再次调整大小并且浏览器宽度> = 941px，则打开codeMagic（）。 然后当然如果页面加载小于941px不运行codeMagic（），但保持调整大小意识。

这是我的示例代码：

CSS：

<style>
    body { margin: 0; }
    footer { padding: 10px; margin: 10px; height: 100%; } 
  </style>

HTML：

<div id="home">home!</div>
<footer>footer!</footer>

<script src='lib/js/vendor/jquery.js'></script>
<script src='../den.js'></script>

JS：

jQuery( document ).ready(function($) { 
// set element height based on 'window height' - 'footer height' 

function codeMagic() {

    var docHeight = parseInt($( window ). height());     
    var footerHeight = parseInt($( 'footer' ).outerHeight( true ));
    var homeHeight = +docHeight - +footerHeight + 'px';

        $( 'body #home' ).height(homeHeight);
        console.log( homeHeight, footerHeight);         
};

if (jQuery(window).width() >= 941) {  

codeMagic(); // init codeMagic

//Set codeMagic to run on browser resize
$( window ).resize( function() { 

    codeMagic();

    });
   }
});

这样做的正确方法是什么？

Answer 1

如果浏览器在DOM init上大于941 px ，则永远不会触发您的resize事件，因为您没有绑定它。 您需要像下面这样更改它：

if (jQuery(window).width() >= 941) {  
  codeMagic(); // init codeMagic
}


//afterwards bind to the resize event
$( window ).resize( function() { 
  //check size again
  if (jQuery(window).width() >= 941) {  
    codeMagic();
  }
});