Question

我有一个javascript函数，只有当浏览器屏幕大于1024px时才能执行。

if ($(window).width() > 1024) {

此代码的问题在于，如果用户首先在浏览器屏幕800px中加载网页，然后将浏览器屏幕重新缩放到1024（或更多），则不会执行该功能。为了执行，需要刷新屏幕。

你有什么建议如何解决它？

Answer 1

只需设置window.resize事件，该事件将在加载时调用至少一次，并且只要有调整大小，并使用一个标志来确保它不会被执行多次。

(function(){
   var executed = false;
   $(window).resize(function(){
      if(executed) return;
      if($(window).width()>1024){
         executed = true;
         executeSomeFunc();
      }
   });
})();

Answer 2

使用：

  $( window ).resize(function() {
    if ($(window).width() > 1024) {

         // Your code.
    }
 }

Answer 3

jQuery resize

$(document).ready(function() {
    if ($(window).width() > 1024) {
        my_awesome_window_above1024_function();
    }
});
$(window).resize(function() {
    if ($(window).width() > 1024) {
        my_awesome_window_above1024_function();
    }
});

Answer 4

我会像这样使用本机JS：

window.onresize=function(){
  if(window.innerWidth > 1024){
    alert('GT 1024');
    // Your function here
  }
};

width属性是innerWidth（http://www.w3schools.com/jsref/prop_win_innerheight.asp），resize函数是（http://www.w3schools.com/jsref/event_onresize.asp）

不清楚您想要做什么，但如果您要更改CSS规则以进行显示，则最好使用CSS媒体查询（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries）

动态的javascript函数

4 个答案: