Merge pull request #23 from Denich/screen-size-detect

implemented device type determination using smallest-width qualifier
hgoebl · Mar 22, 2015 · 8c53eb2 · 8c53eb2
2 parents ede75ac + 8dd00df
commit 8c53eb2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 28 deletions.
diff --git a/generate/mobile-detect.template.js b/generate/mobile-detect.template.js
@@ -314,6 +314,12 @@ define(function () {
         return 'C';
     }
 
+    function getDeviceSmallerSide() {
+        return window.screen.width < window.screen.height ?
+            window.screen.width :
+            window.screen.height;
+    }
+
     /**
      * Constructor for MobileDetect object.
      * <br>
@@ -331,19 +337,21 @@ define(function () {
      * </pre>
      *
      * @param {string} userAgent typically taken from window.navigator.userAgent or http_header['User-Agent']
-     * @param {number} [maxPhoneWidth=650] <strong>only for browsers</strong> specify a value for the maximum
-     *        width (in logical "CSS" pixels) until a device detected as mobile will be handled as phone.
+     * @param {number} [maxPhoneWidth=600] <strong>only for browsers</strong> specify a value for the maximum
+     *        width of smallest device side (in logical "CSS" pixels) until a device detected as mobile will be handled
+     *        as phone.
      *        This is only used in cases where the device cannot be classified as phone or tablet.<br>
-     *        See <a href="http://www.html5rocks.com/en/mobile/cross-device/">A non-responsive approach to
-     *        building cross-device webapps</a>.<br>
+     *        See <a href="http://developer.android.com/guide/practices/screens_support.html">Declaring Tablet Layouts
+     *        for Android</a>.<br>
      *        If you provide a value < 0, then this "fuzzy" check is disabled.
      * @constructor
      * @global
      */
     function MobileDetect(userAgent, maxPhoneWidth) {
         this.ua = userAgent || '';
         this._cache = {};
-        this.maxPhoneWidth = maxPhoneWidth || 650;
+        //600dp is typical 7" tablet minimum width
+        this.maxPhoneWidth = maxPhoneWidth || 600;
     }
 
     MobileDetect.prototype = {
@@ -550,16 +558,9 @@ define(function () {
     };
 
     // environment-dependent
-    if (typeof window !== 'undefined' && window.screen && window.screen.width) {
+    if (typeof window !== 'undefined' && window.screen) {
         MobileDetect.isPhoneSized = function (maxPhoneWidth) {
-            if (maxPhoneWidth < 0) {
-                return undefined;
-            }
-            var physicalPixelWidth = window.screen.width,
-                pixelRatio = window.devicePixelRatio || 1,
-                cssPixelWidth = physicalPixelWidth / pixelRatio;
-
-            return cssPixelWidth <= maxPhoneWidth;
+            return maxPhoneWidth < 0 ? undefined : getDeviceSmallerSide() <= maxPhoneWidth;
         };
     } else {
         MobileDetect.isPhoneSized = function () {};

diff --git a/mobile-detect.js b/mobile-detect.js
@@ -571,6 +571,12 @@ define(function () {
         return 'C';
     }
 
+    function getDeviceSmallerSide() {
+        return window.screen.width < window.screen.height ?
+            window.screen.width :
+            window.screen.height;
+    }
+
     /**
      * Constructor for MobileDetect object.
      * <br>
@@ -588,19 +594,21 @@ define(function () {
      * </pre>
      *
      * @param {string} userAgent typically taken from window.navigator.userAgent or http_header['User-Agent']
-     * @param {number} [maxPhoneWidth=650] <strong>only for browsers</strong> specify a value for the maximum
-     *        width (in logical "CSS" pixels) until a device detected as mobile will be handled as phone.
+     * @param {number} [maxPhoneWidth=600] <strong>only for browsers</strong> specify a value for the maximum
+     *        width of smallest device side (in logical "CSS" pixels) until a device detected as mobile will be handled
+     *        as phone.
      *        This is only used in cases where the device cannot be classified as phone or tablet.<br>
-     *        See <a href="http://www.html5rocks.com/en/mobile/cross-device/">A non-responsive approach to
-     *        building cross-device webapps</a>.<br>
+     *        See <a href="http://developer.android.com/guide/practices/screens_support.html">Declaring Tablet Layouts
+     *        for Android</a>.<br>
      *        If you provide a value < 0, then this "fuzzy" check is disabled.
      * @constructor
      * @global
      */
     function MobileDetect(userAgent, maxPhoneWidth) {
         this.ua = userAgent || '';
         this._cache = {};
-        this.maxPhoneWidth = maxPhoneWidth || 650;
+        //600dp is typical 7" tablet minimum width
+        this.maxPhoneWidth = maxPhoneWidth || 600;
     }
 
     MobileDetect.prototype = {
@@ -841,16 +849,9 @@ define(function () {
     };
 
     // environment-dependent
-    if (typeof window !== 'undefined' && window.screen && window.screen.width) {
+    if (typeof window !== 'undefined' && window.screen) {
         MobileDetect.isPhoneSized = function (maxPhoneWidth) {
-            if (maxPhoneWidth < 0) {
-                return undefined;
-            }
-            var physicalPixelWidth = window.screen.width,
-                pixelRatio = window.devicePixelRatio || 1,
-                cssPixelWidth = physicalPixelWidth / pixelRatio;
-
-            return cssPixelWidth <= maxPhoneWidth;
+            return maxPhoneWidth < 0 ? undefined : getDeviceSmallerSide() <= maxPhoneWidth;
         };
     } else {
         MobileDetect.isPhoneSized = function () {};