This article is going to be a short one, but I need to do it. I’m writing it because of a question posted at forum.ionicframework.com regarding Ionic page height and width. This is not the first time I so this kind of question so it’s safe to say people are interested in this topic.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins ...
 

Intro

 
If you want to calculate Ionic page width and height you don’t need to look further than what AngularJS provides. Usually this is done using browser’s window object. While this object is globally available in vanilla JavaScript as a global variable, it could cause some runtime problems. When working with AngularJS we always refer to it through the $window service. This way it can be overridden, removed or even mocked for testing purposes.
 

Example 1

 
app.controller('MainCtrl', function($scope, $window) {
 
To make this work we need to inject $window service into page controller. After that, if we want to get window dimensions just call innerWidth and innerHeight on $window service.
 
$scope.dev_width = $window.innerWidth;
$scope.dev_height = $window.innerHeight;
 

Embedded working example

 
Ionic Framework – Get page width and height
 

HTML:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title>Ionic Framework Example</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
  
    <ion-pane>
      <ion-header-bar class="bar-header">
          <h1 class="title">Main Page</h1>
      </ion-header-bar>    
      <ion-content has-header="true" padding="true">
        <h2>Page width: {{dev_width}}px </h2>
        <h2>Page height: {{dev_height}}px </h2>
      </ion-content>
    </ion-pane>
  
  </body>

</html>

JavaScript:

var app = angular.module('myApp', ['ionic']);

app.controller('MainCtrl', function($scope, $window) {
    $scope.dev_width = $window.innerWidth;
    $scope.dev_height = $window.innerHeight;
});
 

Example 2

 
But what about page resize event, how are we going to get a correct date if page dimensions change due to different device orientation?
 
Similar to the jQuery solution, we only need to watch for window resize event. $scope.$apply is needed to start a scope variable update when an event finally triggers.
 
angular.element($window).bind('resize', function(){
  $scope.$apply(function() {
    $scope.calculateDimensions();    
  })       
});
 

Embedded working example

 
Ionic Framework – Get page width and height – Second Example
 

HTML:

This code uses same HTML page like a previously posted example.
 

JavaScript:

var app = angular.module('myApp', ['ionic']);

app.controller('MainCtrl', function($scope, $window) {

  $scope.calculateDimensions = function(gesture) {
    $scope.dev_width = $window.innerWidth;
    $scope.dev_height = $window.innerHeight;
  }
    
  angular.element($window).bind('resize', function(){
    $scope.$apply(function() {
      $scope.calculateDimensions();    
    })       
  });
    
  $scope.calculateDimensions();    
    
});
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • leonard9500

    Thank you very much! this was a very helpul example for my app!! thanks again!

  • KingOfMyRoom

    Hey Dragan!

    Can you please do a similar example with ionic 2?

  • Daniel García Páez

    Very usufel!

    Many thanks!