#8: Use real device width

Author: nghuuphuoc

CHANGELOG.md

@@ -3,9 +3,10 @@
 v1.2.0 (2013/09/27)
 
 * Upgrade jQuery to 1.10.2 and 2.0.3
-* Add new device (LG Nexus 4)
+* Add new devices (LG Nexus 4, Samsung Y, Samsung S)
 * Extend the width of preview 15px (scroll bar width)
 * Remove screenshot feature
+* [#8] Use real device width
 
 v1.1.1 (2013/08/22)
 

README.md

@@ -15,6 +15,10 @@ If you want it to support more devices and screen resolutions, please fork the p
 
 **Nguyen Huu Phuoc** ([Email](mailto: [email protected]) / [Twitter](http://twitter.com/nghuuphuoc) / [Github](http://github.com/nghuuphuoc))
 
+Big thanks to the contributors:
+
+* [michaseel](https://github.com/michaseel)
+
 ## License
 
 Copyright (c) 2013 Nguyen Huu Phuoc

app/js/responsivetest.js

@@ -41,7 +41,8 @@ angular
                     }
                     template += '<li class="dropdown-header" ng-mouseover="toggleBrand(' + i + ')">' + brands[i].name + '</li>';
                     for (var j in brands[i].devices) {
-                        template += '<li ng-show="openStatus[' + i + ']"><a href="javascript: void(0);" ng-click="$parent.resizeTo(' + brands[i].devices[j].w + ', ' + brands[i].devices[j].h + ')">' + brands[i].devices[j].name;
+                        var pixelDestiny = brands[i].devices[j].pxd ? brands[i].devices[j].pxd : 1;
+                        template += '<li ng-show="openStatus[' + i + ']"><a href="javascript: void(0);" ng-click="$parent.resizeTo(' + brands[i].devices[j].w + ', ' + brands[i].devices[j].h + ', ' + pixelDestiny + ')">' + brands[i].devices[j].name;
 
                         if (brands[i].devices[j].inch) {
                             template += ' <small></small><span>' + brands[i].devices[j].inch + '"</span>';
@@ -64,8 +65,8 @@ angular
                 var parent = $scope.$parent;
                 $element.resizable({
                     resize: function(event, ui) {
-                        $scope.w = ui.size.width;
-                        $scope.h = ui.size.height;
+                        $scope.w = ui.size.width  * $scope.pxd;
+                        $scope.h = ui.size.height * $scope.pxd;
                         parent.$apply();
                     }
                 });
@@ -105,6 +106,10 @@ angular
         $scope.loading  = true;
         $scope.w        = 1024;
         $scope.h        = 768;
+
+        // Pixel destiny
+        // See http://screensiz.es
+        $scope.pxd      = 1;
         $scope.url      = null;
         $scope.frameSrc = null;
 
@@ -125,6 +130,7 @@ angular
                         $scope.url = array[0];
                         $scope.w   = array[1];
                         $scope.h   = array[2];
+                        $scope.pxd = array.length > 3 ? array[3] : 1;
                     }
                 } else {
                     // Get the random URL
@@ -157,10 +163,12 @@ angular
          * Switch to given size
          * @param {int} width
          * @param {int} height
+         * @param {int} pixelDestiny
          */
-        $scope.resizeTo = function(width, height) {
-            $scope.w = width;
-            $scope.h = height;
+        $scope.resizeTo = function(width, height, pixelDestiny) {
+            $scope.w   = width;
+            $scope.h   = height;
+            $scope.pxd = pixelDestiny;
         };
 
         /**
@@ -194,7 +202,7 @@ angular
         $scope.updateHash = function() {
             if ($scope.w && $scope.h && $scope.url) {
                 // Update the location hash
-                window.location.hash = '#u=' + [$scope.url, $scope.w, $scope.h].join('|');
+                window.location.hash = '#u=' + [$scope.url, $scope.w, $scope.h, $scope.pxd].join('|');
             }
         };
     });