javascript - 当屏幕宽度是这个时运行 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
}