Merge pull request #1098 from adaptlearning/issue/1096

Resolves #1096, device width for iOS devices
adaptlearning · Jun 16, 2016 · 552a262 · 552a262
2 parents f7db7b2 + 76de9ba
commit 552a262
Showing 1 changed file with 28 additions and 18 deletions.
diff --git a/src/core/js/device.js b/src/core/js/device.js
@@ -2,62 +2,73 @@ define(function(require) {
 
     var Adapt = require('coreJS/adapt');
     var Bowser = require('coreJS/libraries/bowser');
-
-    Adapt.device = {};
-
     var $window = $(window);
 
-    // Check whether device is touch enabled
-    Adapt.device.touch = Modernizr.touch;
+    Adapt.device = {
+        touch: Modernizr.touch,
+        screenWidth: isAppleDevice() ? screen.width : window.innerWidth || $window.width()
+    };
 
     Adapt.once('app:dataReady', function() {
-        // The theme.json will have been loaded at this point
         Adapt.device.screenSize = checkScreenSize();
 
-        $('html').addClass("size-"+Adapt.device.screenSize);
-    });
+        $('html').addClass("size-" + Adapt.device.screenSize);
 
-    Adapt.device.screenWidth = $window.width();
+        // As Adapt.config is available it's ok to bind the 'resize'.
+        $window.on('resize', onWindowResize);
+    });
 
+    /**
+     * Compares the calculated screen width to the breakpoints defined in config.json.
+     * 
+     * @returns {string} 'large', 'medium' or 'small'
+     */
     function checkScreenSize() {
-
+        var screenSizeConfig = Adapt.config.get('screenSize');
         var screenSize;
 
-        if (Adapt.device.screenWidth > Adapt.config.get('screenSize').medium) {
+        if (Adapt.device.screenWidth > screenSizeConfig.medium) {
             screenSize = 'large';
-        } else if (Adapt.device.screenWidth > Adapt.config.get('screenSize').small) {
+        } else if (Adapt.device.screenWidth > screenSizeConfig.small) {
             screenSize = 'medium';
         } else {
             screenSize = 'small';
         }
+
         return screenSize;
     }
 
     var onWindowResize = _.debounce(function onScreenSizeChanged() {
-        Adapt.device.screenWidth = window.innerWidth || $window.width();
+        // Calculate the screen width.
+        Adapt.device.screenWidth = isAppleDevice()
+            ? screen.width
+            : window.innerWidth || $window.width();
+
         var newScreenSize = checkScreenSize();
 
         if (newScreenSize !== Adapt.device.screenSize) {
             Adapt.device.screenSize = newScreenSize;
 
-            $('html').removeClass("size-small size-medium size-large").addClass("size-"+Adapt.device.screenSize);
+            $('html').removeClass("size-small size-medium size-large").addClass("size-" + Adapt.device.screenSize);
 
             Adapt.trigger('device:changed', Adapt.device.screenSize);
         }
 
-	Adapt.trigger('device:resize', Adapt.device.screenWidth);
+	    Adapt.trigger('device:resize', Adapt.device.screenWidth);
 
     }, 100);
 
-    $window.on('resize', onWindowResize);
-
     var browser = Bowser.name;
     var version = Bowser.version;
     var OS = Bowser.osversion;
 
     // Bowser only checks against navigator.userAgent so if the OS is undefined, do a check on the navigator.platform
     if (OS == undefined) OS = getPlatform();
 
+    function isAppleDevice() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+    }
+
     function getPlatform() {
 
         var platform = navigator.platform;
@@ -71,7 +82,6 @@ define(function(require) {
         }
 
         return "PlatformUnknown";
-
     }
 
     function pixelDensity() {