Определить ориентацию области просмотра, если ориентация является вертикальной, выводит на экран предупреждающее сообщение с инструкциями для пользователя

Question

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

Есть ли способ определить, просматривает ли пользователь, посещающий эту страницу, ее в портретном режиме, и, если да, отобразить сообщение, информирующее пользователя о том, что страницу лучше всего просматривать в альбомном режиме? Если пользователь уже просматривает его в альбомном режиме, сообщение не появится.

Итак, я хочу, чтобы сайт определял ориентацию области просмотра, если ориентация Портрет , а затем отображал предупреждение, сообщающее пользователю, что эту страницу лучше всего просматривать в режиме Пейзаж .

Большое спасибо, Dan

Answer 1

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile имеет событие, которое обрабатывает изменение этого свойства ... если вы хотите предупредить, если кто-то поворачивается позже - orientationchange

Кроме того, после некоторогопогуглив, проверь window.orientation (который я считаю измеренным в градусах ...)

Answer 2

Вы также можете использовать window.matchMedia, который я использую и предпочитаю, так как он очень похож на синтаксис CSS:

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

Протестировано на iPad 2.

Answer 3

У Дэвида Уолша лучший и точечный подход.

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

Во время этих изменений свойство window.orientation может измениться.Значение 0 означает книжную ориентацию, -90 означает, что устройство повернуто в горизонтальной плоскости вправо, а 90 означает, что устройство альбомно повернуто влево.

http://davidwalsh.name/orientation-change

Answer 4

Вы можете использовать CSS3:

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

Answer 5

Есть несколько способов сделать это, например:

• Проверить window.orientation значение
• Сравнить innerHeight с innerWidth

Вы можете адаптировать один из следующих способов.

---

Проверить, находится ли устройство в портретном режиме

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

Проверить, работает ли устройствов ландшафтном режиме

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

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

if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}

---

Как определить изменение ориентации?

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});

Answer 6

Я думаю, что более стабильным решением является использование экрана вместо окна, потому что оно может быть как горизонтальным, так и вертикальным, если вы измените размер окна браузера на настольном компьютере.

if (screen.height > screen.width){
    alert("Please use Landscape!");
}

Answer 7

Чтобы применить все эти замечательные комментарии к моему ежедневному кодированию, для обеспечения преемственности между всеми моими приложениями, я решил использовать следующее в своем мобильном коде jquery и jquery.

window.onresize = function (event) {
  applyOrientation();
}

function applyOrientation() {
  if (window.innerHeight > window.innerWidth) {
    alert("You are now in portrait");
  } else {
    alert("You are now in landscape");
  }
}

Answer 8

Не пытайтесь фиксировать запросы window.orientation (0, 90 и т. Д. Не означает портрет, пейзаж и т. Д.):

http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

Даже на iOS7 в зависимости от того, как вы заходите в браузер, 0 не всегда портрет

Answer 9

Я объединил два решения, и у меня это отлично работает.

window.addEventListener("orientationchange", function() {                   
    if (window.matchMedia("(orientation: portrait)").matches) {
       alert("PORTRAIT")
     }
    if (window.matchMedia("(orientation: landscape)").matches) {
      alert("LANSCAPE")
     }
}, false);

Answer 10

После некоторых экспериментов я обнаружил, что вращение устройства, ориентированного на ориентацию, всегда вызывает событие окна браузера resize.Так что в вашем обработчике изменения размера просто вызовите функцию вроде:

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}