iPad/iPhone Orientation Body Class


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.