我如何才能使此脚本仅在特定屏幕尺寸以上执行？

Question

我使用的是从德国某个网站购买的脚本，所以我听不懂说明书。 基本上，我想这样做，因此只能在768像素以上的屏幕上触发。 我尝试了几种不同的方法，但似乎无法使其正常工作。 我不太熟悉Javascript。 如果有人可以告诉我该怎么做，我将不胜感激。

  $(document).ready(function() {
    //Build Bubble Machines with the Bubble Engine ------------------------
    var SoapBubbleMachineNumber1 = $('fn').BubbleEngine({
      particleSizeMin:            0,
      particleSizeMax:            60,
      particleSourceX:            0,
      particleSourceY:            500,
      particleAnimationDuration:  5000,
      particleDirection:          'right',
      particleAnimationDuration:  6000,
      particleAnimationVariance:  2000,
      particleScatteringX:        500,
      particleScatteringY:        300,
      gravity:                    -100
    });
    //Start Bubble Machine 1 ---------------------------------------------
    SoapBubbleMachineNumber1.addBubbles(50);
  });

Answer 1

var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth;

if(x > 768){
   //your code here.
}

第一部分是一个相当健壮的函数，用于查找窗口宽度。

然后，您要做的就是将您的代码包装在一个函数中，并在//your code here部分中调用该函数

Answer 2

首先google翻译是你的朋友;）如果没有效果的话，请问我这样的德国人;）

 function executeme(minWidth,minHeight){  
      var width = window.innerWidth|| document.documentElement.clientWidth|| 
      Document.body.clientWidth;

      var height = window.innerHeight || document.documentElement.clientHeight || 
      document.body.clientHeight;

      if (width < minWidth){return false;}
      if (height < minHeight){return false;}
      return true;
 }

这将在浏览器窗口中起作用

例如，如果您想知道div中还有多少空间

    function getGeometry(id){

         try{
         var element=document.getElementById()  
         } catch (ex){
             return false;
         }
         var rect = element.getBoundingClientRect(); 
         // uncomment to see the whole show :)
         // console.log(rect); 
         return rect;
    }

    function runOnElementGeometry(id,minWidth,minHeight){
         try{
         var element=document.getElementById()  
         } catch (ex){
             return false;
         }
         var rect = element.getBoundingClientRect(); 

         if (rect.width < minWidth){return false;}
         if (rect.height < minHeight){return false;}
         return true;
    }

如果还需要元素在页面上的位置，则需要添加滚动位置（宽度和高度不需要）

      var x = window.scrollX
      var y = window.scrollY

现在，您可以检查发生了什么，然后启动泡泡，甚至不启动:)