如何根据屏幕宽度调用函数？答案

【问题标题】：How can I call a function depending on screen width?如何根据屏幕宽度调用函数？
【发布时间】：2016-09-15 01:04:49
【问题描述】：

我有 2 个函数，我希望根据屏幕宽度调用它们。

这是我尝试过的：

var winWidth = $(window).width();

var sections = function() {
    $('.image').each(function(){
       var $this = $(this),
        x = $this.find('img').width()
        $this.width(x);
     });
};

var sectionsMobile = function() {
     $('.image').find('img').css({
           'height': 'auto',
            'width': '100%'
         });
};

function checkSize() {
  if (winWidth >= 800) {
      sections();
    }   else {
      sectionsMobile();
  }
}
jQuery(window).on('load resize', checkSize);

当页面加载时，它会工作并应用 CSS。但是在 800px 边界之间调整大小不会在函数之间切换。

完整演示：http://codepen.io/sol_b/pen/PzgdWy

非常感谢任何帮助。

【问题讨论】：

如果你的函数应该应用于窗口调整大小，你应该查看$(window).on('resize', yourFunc)。

标签： javascript jquery css media-queries

【解决方案1】：

第一行被永久缓存：

var winWidth = $(window).width();

只需将其移入 checkSize() 函数即可。

【讨论】：

【解决方案2】：

试试这个：

$(window).on("load resize",function(){

    if($(this).width() >= 800 )
        sections();

    else
        sectionsMobile();

});

【讨论】：

【解决方案3】：

添加这个：

(window).resize(function() {
 if (winWidth >= 800) {
      sections();
    }   else {
      sectionsMobile();
  }
});

【讨论】：