Отображение различных данных в книжной / альбомной ориентации

Question

Есть ли способ обработки, когда пользователь переключается из книжного в альбомную ориентацию в веб-приложении? Например, когда вы смотрите веб-приложение в книжной ориентации и видите нормальные данные.

А затем, когда вы переключаете свое устройство в альбомную ориентацию, вы видите некоторые другие данные.

Мой вопрос: есть ли способ сделать это с помощью чистого JavaScript и CSS? Или я должен полагаться на API?

ОБНОВЛЕНИЕ: я нашел способ сделать это с чистым / простым JS, используя API-интерфейс Device Orientation, и я нашел пример, который выполняет то, что я пытаюсь сделать, но я не могу заставить его работать должным образом, потому что оператор if прерывает меня каждый раз, когда вращение больше, чем 90, и даже если я поставлю переменную, чтобы проверить, является ли вращение уже 90.

function init() {
        var compass = document.getElementById('compass'),
        comp = document.getElementById("comp");
        if(window.DeviceOrientationEvent) {

          window.addEventListener('deviceorientation', function(event) {
                var alpha;
                //Check for iOS property
                if(event.webkitCompassHeading) {
                  alpha = event.webkitCompassHeading;
                  //Rotation is reversed for iOS
                  compass.style.WebkitTransform = 'rotate(-' + alpha + 'deg)';
                }
                //non iOS
                else {
                  alpha = event.alpha;
                  webkitAlpha = alpha;
                  if(!window.chrome) {
                    //Assume Android stock (this is crude, but good enough for our example) and apply offset
                    webkitAlpha = alpha-270;
                  }
                }

                compass.style.Transform = 'rotate(' + alpha + 'deg)';

//THIS IS THE PART I'VE ADDED
var iftrue = false;
comp.innerHTML = alpha + "deg";
if (alpha >= 90 && alpha <= 100) {
    if (!iftrue) {
        alert("it is");
        return iftrue = true;
    };
}
else if (alpha <= 90) {console.log("it is not");
};
//TILL HERE                    compass.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)';
                //Rotation is reversed for FF
                compass.style.MozTransform = 'rotate(-' + alpha + 'deg)'; 
              }, false);
        }
      }

Answer 1

Вы можете использовать CSS Media Queries для определения, находится ли устройство в горизонтальной или вертикальной ориентации. С помощью вашего CSS вы можете определить, какую информацию показывать, когда. Например:

/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen 
 and (min-device-width: 414px) 
 and (max-device-width: 736px) 
 and (-webkit-min-device-pixel-ratio: 3) { 
/* Your styles */
}

/* Portrait */
@media only screen 
 and (min-device-width: 414px) 
 and (max-device-width: 736px) 
 and (-webkit-min-device-pixel-ratio: 3)
 and (orientation: portrait) { 
 /* Your styles */
}

/* Landscape */
@media only screen 
 and (min-device-width: 414px) 
 and (max-device-width: 736px) 
 and (-webkit-min-device-pixel-ratio: 3)
 and (orientation: landscape) { 
 /* Your styles */
}

См. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ для получения дополнительных примеров.

Answer 2

Если вы используете Twitter Bootstrap, вы можете сделать что-то вроде этого:

Текст скрыт на телефоне

Текст виден на небольших устройствах

Пожалуйста, ознакомьтесь с документацией Twitter Bootstrap для получения дополнительной информации: