当屏幕宽度是这个时运行 JS

Question

我有这个 js，我只想在屏幕大小为 800 或以下时运行，因为它支持滑动。请帮助我无法弄清楚。

var snapper = new Snap({
  element: document.getElementById('content')
});

并且 Snap 由

链接

感谢您的帮助。

编辑：

<script> 

            $(function() {
                var SmartMenu           = $('#SmartMenu');
                    MainMenu            = $('.MainMenu');

                    PortfolioMenu       = $('#Portfolio');
                    PortfolioSubMenu    = $('.subMenu');

                    SmartMenuOpen       = $('#SmartMenuOpen');
                    wrapperHeader   = $('.wrapperHeader-Top');

if(window.innerWidth <= 800) {
                        var snapper = new Snap({
  element: document.getElementById('W')
});
}


                $(SmartMenu).on('click', function(a) {
                    if( snapper.state().state=="left" ){
                    snapper.close();
                } else {
                    snapper.open('left');
                }
                });
</script>

Answer 1

if(window.innerWidth <= 800) {
   // Your code here
}

第一次应该可以解决问题。

编辑 1： 如果您希望在调整浏览器大小时更改它

window.onresize = function(event) {
  if(window.innerWidth <= 800) {
    // Your code here
  }
}

但请确保您包含的代码在调整浏览器大小时多次调用时能够正常工作。

编辑 2 可以访问 jQuery：#2 支持 Snap API 并支持 init

var snapper;

function initSnapper() {
  if($(window).innerWidth() <= 800) {
    if(snapper === undefined) {
      snapper = new Snap({
        element: document.getElementById('W')
      });
    } 
    else {
      snapper.enable();
    }
  }
  else if(snapper !== undefined) {
    snapper.disable();
  }
}


$(window).resize(initSnapper);
initSnapper();

这将在页面加载时初始化 snapper，并在页面调整大小时调用 initSnapper。 在检查状态之前，您需要检查 snapper 是否存在

if( snapper && snapper.state().state=="left" ){
  // snapper code
}