Stopped ProcessingJS running on mobile

harrymt · Feb 10, 2016 · 0d28c29 · 0d28c29
1 parent 79ccead
commit 0d28c29
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/development.html b/development.html
@@ -25,7 +25,7 @@
 </head>
 <body>
 
-  <canvas data-processing-sources="main.pde"></canvas>
+  <canvas id="processing-background" data-processing-sources="main.pde"></canvas>
 
   <div class="cover-gradient"></div>
 

diff --git a/index.html b/index.html
diff --git a/js/dev/main.js b/js/dev/main.js
@@ -1,3 +1,19 @@
 //
 // main.js
-//
+//
+
+function IsMobile() {
+ return !!( navigator.userAgent.match(/Android/i) ||
+     navigator.userAgent.match(/webOS/i) ||
+     navigator.userAgent.match(/iPhone/i) ||
+     navigator.userAgent.match(/iPad/i) ||
+     navigator.userAgent.match(/iPod/i) ||
+     navigator.userAgent.match(/BlackBerry/i) ||
+     navigator.userAgent.match(/Windows Phone/i)
+ );
+}
+
+// Stop canvas from being drawn on mobiles
+if(IsMobile() || $(window).width() < 500) {
+  $('#processing-background').css("display", "none");
+}
diff --git a/js/main.min.js b/js/main.min.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,7 +25,7 @@ @@
     </head>
     <body>
-      <canvas data-processing-sources="main.pde"></canvas>
+      <canvas id="processing-background" data-processing-sources="main.pde"></canvas>
       <div class="cover-gradient"></div>
@@ Expand Down @@