Posted By

iridium on 12/15/11


Tagged

css class body iphone portrait landscape orientation iPad ios


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

adambundy
yoitsben
Balamir
BrockSamsom


iPad/iPhone Orientation Body Class


 / Published in: jQuery
 

This function will detect the orientation (portrait/landscape) of an iOS device and set the body class to either portrait or landscape, as well as providing a global variable for use elsewhere in your JS.

If you require multiple classes on your body tag, simply alter the code to use jQuery's addClass() and removeClass() functions.

  1. function orient() {
  2. if (window.orientation == 0 || window.orientation == 180) {
  3. $("body").attr("class", "portrait");
  4. orientation = 'portrait';
  5.  
  6. return false;
  7. }
  8. else if (window.orientation == 90 || window.orientation == -90) {
  9. $("body").attr("class", "landscape");
  10. orientation = 'landscape';
  11.  
  12. return false;
  13. }
  14. }
  15.  
  16. /* Call orientation function on page load */
  17. $(function(){
  18. orient();
  19. });
  20.  
  21. /* Call orientation function on orientation change */
  22. $(window).bind( 'orientationchange', function(e){
  23. orient();
  24. });

Report this snippet  

You need to login to post a comment.