How to get the dimensions of the Viewport using AngularJS ?
In this article, we will see how to get the dimensions of the Viewport in AngularJS.
Approach:
- The approach is to use clientWidth and innerWidth property.
- The maximum of these values should be the width and height respectively.
Example 1: In this example, the height and width are calculated in pixels.
HTML
<!DOCTYPE HTML> <html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.height = ''; $scope.width = ''; $scope.getVPDimnsn = function() { $scope.width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) $scope.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to get the dimensions of the Viewport in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <button ng-click='getVPDimnsn()' > Click here </button> <br><br> Height of viewport = {{height}}px <br> Width of viewport= {{width}}px <br> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
Example 2: In this example, the height and width are calculated in centimeters.
HTML
<!DOCTYPE HTML> <html> <head> <script src= </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.height = ''; $scope.width = ''; $scope.getVPDimnsn = function() { $scope.width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) $scope.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> How to get the dimensions of the Viewport in AngularJS </p> <div ng-app="app"> <div ng-controller="controller"> <button ng-click='getVPDimnsn()' > Click here </button> <br> <br> Height of viewport = {{height * 2.54 / 96}}cm <br> Width of viewport= {{width * 2.54 / 96}}cm <br> </div> </div> </body> </html> |
chevron_right
filter_none
Output:
