somewhat robust detection of desktop, tablet or smartphone. This mainly w.r.t. the help tour, which we don't want to show on smartphones.

js_src/buttonbehaviors.js

@@ -173,7 +173,7 @@ function initButtonBehavior() {
   btnInfo.mouseup(function(e) {
     e.preventDefault();
     console.log("btnInfo mouse up");
-    helpTours.startTour(helpTours.WELCOMETOUR);
+    if (!clientInfo.isSmartphone) helpTours.startTour(helpTours.WELCOMETOUR);
   });
 
   // DEBUG

js_src/main.js

@@ -20,6 +20,8 @@ var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previ
 var showhideInterval;
 var showOrHide = false;
 
+var clientInfo = {};
+
 $(function() {
   console.log("ready");
 
@@ -48,13 +50,17 @@ $(function() {
   console.log("wifiboxIsRemote: " + wifiboxIsRemote);
   console.log("wifibox URL: " + wifiboxURL);
 
+  // rudimentary client info
+  clientInfo.isMobileDevice = isMobileDevice();
+  clientInfo.isSmartphone = isSmartphone();
+
   initDoodleDrawing();
   initPreviewRendering();
   initLayouting();
   initSidebars();
   initButtonBehavior();
   initVerticalShapes();
-  initHelp();
+  if (!clientInfo.isSmartphone) initHelp();
 
 	thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
   progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));

js_src/utils.js

@@ -5,3 +5,24 @@ function getURLParameter(name) {
     (new RegExp('[&?]'+name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
   );
 }
+
+// returns true for all smartphones and tablets
+function isMobileDevice() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Mobile/i.test(navigator.userAgent);
+}
+
+// returns true for smartphones (Android will be a bit dodgy (tablet or phone, all depends on pixels vs devicePixelRatio...)
+function isSmartphone() {
+  var returnBool = false;
+  if( /Android/i.test(navigator.userAgent) && window.devicePixelRatio > 1) {
+    var w = $(window).width() / window.devicePixelRatio;
+    console.log("Android device >> ratio'd width: " + w);
+    if (w < 480) {
+      returnBool = true;
+    }
+  } else {
+    returnBool = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini|Windows Mobile/i.test(navigator.userAgent)
+  }
+
+  return returnBool;
+}