仅当视口宽度小于选择时如何运行 jquery 函数？答案

【问题标题】：How to run a jquery function only when viewport width is less than chosen?仅当视口宽度小于选择时如何运行 jquery 函数？
【发布时间】：2017-04-18 17:36:22
【问题描述】：

我只想在 vieport 宽度小于 816 像素时运行 jquery 函数，但我无法让它工作。有人能告诉我我做错了什么吗？

我主要使用谷歌浏览器开发工具模拟器，但它也出现在我的私人手机中（Desire 820（1280x720 屏幕））。我尝试使用 window.width 但没有成功。

<!-- language: lang-js -->
if ($('body').width() >= 816) 
{ 
    $(function()
    {
        $('.top-container').data('size','big');

        $(window).scroll(function()
        {
            if($(document).scrollTop() > 0)
            {
                if($('.top-container').data('size') == 'big')
                {
                    $('.top-container').data('size','small');
                    $('.top-container').stop().animate({height:'8vh'},600);
                    $('li').toggleClass('scroll');
                    $(".top-logo").toggleClass('scroll-logo');
                    $('.top-logo > a > img').toggleClass('scroll-logo');
                }
            }
            else
            {
                if($('.top-container').data('size') == 'small')
                {
                    $('.top-container').data('size','big');
                    $('.top-container').stop().animate({ height:'18vh' },600);
                    $('li').toggleClass('scroll').animate({},600);  
                    $(".top-logo").toggleClass('scroll-logo');
                    $('.top-logo > a > img').toggleClass('scroll-logo');

                }
            }
        });
    });
};

<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【问题讨论】：

它在控制台/F12 中返回的错误是什么？可能是因为在您当前的代码中，您尝试在没有完全加载 dom 的情况下使用 jQuery。

标签： jquery function if-statement

【解决方案1】：

这将为您解决问题：

$( window ).resize(function() {

  if ($('body').width()  >= 816) {  
    console.log('run my code!');
  };

  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});

    $( window ).resize(function() {
    
      if ($('body').width()  >= 816) {  
      	console.log('run my code!');
      };
      
      $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
&nbsp;
</div>

https://jsfiddle.net/p19qkb33/

【讨论】：