Question

我想在窗口缩小到一定大小时激活某些功能。

STANDARD_SIZE = 1760;
window.addEventListener('resize', function(event){
    if(window.innerWidth < STANDARD_SIZE ){
        $.post('/a', {size:'mobile'}, function(res){
            document.open();
            document.write(res);
            document.close();
        })}
    else{
        $.post('/a', {size:'window'}, function(res){
            document.open();
            document.write(res);
            document.close();
        })}});

以上是我的代码。问题是当我调整窗口大小时，我需要此代码针对最后的大小（而不是第一个大小）处于活动状态。

例如，我将alert('mobile')和alert('window')分别编码为if和else。当我将宽度调整为小于1760的宽度时，它将警告window 3次，然后警告mobile。

因此，我需要最后一个“手机”在第一次而不是最后一次发出警报。有想法吗？

还有比上面的代码更简单的代码吗？

我一直在尝试我的代码，当我将大小调整到1760以上时，上面的代码确实起作用。但是当我尝试将尺寸调整到1760以下时，它将不起作用。

（已解决）上面的代码确实起作用。我一直想知道为什么它能以window的大小而不是mobile的大小工作。所以我检查了服务器代码（python）。这只是单词拼写错误。感谢您在下面提供其他答案！由于上面存在已知的代码错误，因此，我将离开其他需要调整大小功能帮助的人。

Answer 1

由于没有“调整大小”事件，您可以设置一个超时时间，这样您的代码将无法运行，除非自上次调整大小事件以来经过了足够的时间。

STANDARD_SIZE = 1760;
var resizeTimer;
window.addEventListener('resize', function(event) {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (window.innerWidth < STANDARD_SIZE) {
      alert("mobile");
      /*
      $.post('/a', {
        size: 'mobile'
      }, function(res) {
        document.open();
        document.write(res);
        document.close();
      })
      */
    } else {
      alert("window");
      /*
      $.post('/a', {
        size: 'window'
      }, function(res) {
        document.open();
        document.write(res);
        document.close();
      })
      */
    }
  }, 250);

});

Answer 2

您可以限制多个通话

STANDARD_SIZE = 1760;
var DEVICE = 'window';
window.addEventListener('resize', function(event){
    if(window.innerWidth < STANDARD_SIZE && DEVICE != 'mobile' ){
        DEVICE = 'mobile';
        $.post('/a', {size:'mobile'}, function(res){
            document.open();
            document.write(res);
            document.close();
        })}
    else if(DEVICE != 'window'){
        DEVICE = 'window';
        $.post('/a', {size:'window'}, function(res){
            document.open();
            document.write(res);
            document.close();
        })}});

Answer 3

我认为您无需添加新的事件侦听器即可调整大小。只需执行以下示例： #!/usr/bin/env python import pushover 然后定义您的<body onresize="resizeHandler()">函数：

resizeHandler()

上面的函数处理程序只是解决问题的一种技巧。

调整窗口大小时如何激活

3 个答案: