why does angularjs and jquery give different results for innerWidth

Question

I am working on my first responsive site, using 3 testing devices:

• htc desire 500 dual,
• iphone6, and
• my windows laptop.

And I am testing with various 'languages':

• css media queries
• jquery
• angular

When testing, angularjs gives strange results in the HTC:

    @media screen and (max-width : 320px)
      { some_selector{ /* css that IS triggered */ } 
      }

    jQuery(document).on( 'ready ', 
                         function()
                            { alert( jQuery( window ).innerWidth()) ;   
                            }
                         ) ; // RETURN: 320

    my_app.controller( "my_controller" ,
                       function( $scope , $window )
                           { alert( $window.innerWidth ) ;
                           }
                     ) ;  // RETURN: sometimes 980, sometimes 320, sometimes 192

---

EDIT based on Jonathan's answer, I realize that this is just the same old problem of different browsers handling different window properties differently, especially during the document loading phase ... (which is basically the reason why everybody adopted jQuery, especially jQuery(document).ready(...) handler)

The call to angular's my_app.controller(...) is occurring before jquery's document ready phase, when the DOM is still going through initial setup phases (as you can see by the example below);

And the explanation of why HTC is different from iphone is almost certainly due to the fact that I am using firefox in the htc, and safari in the iphone ...

my_app
  .controller( "my_controller" ,
               function( $scope , $window )
                 { alert( $window.innerWidth + "," + window.innerWidth + "," +  window.document.documentElement.clientWidth ) ; 
                   // returns 154,154,980
                   alert( $window.innerWidth + "," +  window.innerWidth + "," +  window.document.documentElement.clientWidth ) ; 
                   // returns 320,320,320
                }
            ) ;  

Answer 1

While angular has a built in version of jQuery, it's called jqLite, at it doesn't have all the weight of jQuery. The short versions is that angular's $window is, by default, just the plain old Window object and its innerWidth property (see $WindowProvider).

jQuery is looking at different properties to determine the width. It does this to try to normalize values between browsers. If we are to examine jQuery's code (using v1.8.3 and up), we can conclude it is using window.document.documentElement.clientWidth instead.

If you want to learn more about the difference between these two, here is a StackOverflow question asking just that. Also, you could just switch out $window.innerWidth in angular for $window.document.documentElement.clientWidth if you prefer how jQuery calculates it.