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

Question

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

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

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

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

Answer 1

Стоит отметить, что window.orientation возвращает undefined, если вы не используете мобильное устройство. Так что хорошая функция для проверки ориентации может выглядеть так, где x равно window.orientation:

//check for orientation
function getOrientation(x){
  if (x===undefined){
    return 'desktop'
  } else {
    var y;
    x < 0 ? y = 'landscape' : y = 'portrait';
    return y;
  }
}

Назовите это так:

var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
  o = getOrientation(window.orientation);
  console.log(o);
}, false);