Захватить изменение ориентации iPad

Фрагмент кода, чтобы зафиксировать изменение ориентации на устройстве ipad , затем вы можете добавить очень специфические стили для каждого портрета и дизайна ландшафта. Код добавляет класс к тегу html, чтобы помочь с CSS (как библиотеки, такие как Modernizr), используя медиазапросы CSS3.

jQuery(document).ready(function($) {
 //capture ipad device change
function doOnOrientationChange()
{
    switch(window.orientation)
    {
      case -90: 
      case 90:
        alert('landscape'); //debug
        ////add class to assist with libraries like Modernizr
        $('html').removeClass('portrait').addClass('landscape'); 
        break;
      default:
        alert('portrait'); //debug
        $('html').removeClass('landscape').addClass('portrait');
        break;
    }
}

//setup event listener
window.addEventListener('orientationchange', doOnOrientationChange);

//initial call
doOnOrientationChange(); 
});

Пример использования CSS.

 /* styles for tablet only */
@media (min-width: 768px) and (max-width: 1024px)  {

    .portrait {

        /* styles for ipad landscape orientation */

    }    

    .landscape {

        /* styles for ipad landscape orientation */

    }
}