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

Question

I'm using this script which I purchased from some website in German, so I can't understand the instructions. Basically, I want to make it so this is only triggered on screens above 768 pixels. I've tried a few different things and can't seem to get it to work. I'm not very well versed in Javascript. If someone could show me how to do this, I would be very grateful.

  $(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.
}

The first part is a pretty robust function to find the window width.

What you would then do is wrap your code shown in a function and call the function within the //your code here part

Answer 2

first google translator is your friend ;) If nothing works ask a german like me ;) Anyhow :

 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;
 }

this will work on the browser window

If you want to know how much space is left in a div for example

    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;
    }

if you need also the position of the element on the page you need to add the scroll positions (not needed for the width and height)

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

Now you can check whats going on and either start your bubbeles or even not :)