How to get the dimensions of the Viewport using AngularJS ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report In this article, we will see how to get the dimensions of the Viewport in AngularJS. The Viewport is the visible area for the users on the web page that varies with different screen-width, depending upon the devices used. to get the dimension of the Viewport, the clientWidth, and innerWidth properties can be utilized. The DOM clientWidth Property is used to return the viewable width of a specific element including padding but excluding the measurement of margin, border, and scrollbar width. The Window innerWidth property is used for returning the width of a window’s content area. It is a read-only property and returns a number that represents the width of the browser window’s content area in pixels. 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </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> <h3> How to get the dimensions of the Viewport in AngularJS </h3> <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> Output: Example 2: In this example, the height and width are calculated in centimeters. HTML <!DOCTYPE HTML> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </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> <h3> How to get the dimensions of the Viewport in AngularJS </h3> <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> Output: Comment More infoAdvertise with us Next Article Must Coding Questions - Company-wise P PranchalKatiyar Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like