屏幕宽度为此时运行JS

时间:2013-06-24 16:18:09

标签: javascript load width screen

我有这个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>

1 个答案:

答案 0 :(得分: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
}