Определить ориентацию области просмотра, если ориентация - Вертикальное отображение предупреждающего сообщения с инструкциями для пользователя.

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

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

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

РЕДАКТИРОВАТЬ: на мобильных устройствах, если вы откроете клавиатуру, вышеуказанное может привести к сбою, поэтому можно использовать screen.availHeight и screen.availWidth, что дает правильную высоту и ширину даже после открытия клавиатуры.

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}

Вы также можете использовать 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.

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

// 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

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

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

Это можно сделать несколькими способами, например:

• Проверить значение 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);
    });
});

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

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

Чтобы применить все эти замечательные комментарии к моему ежедневному кодированию для обеспечения непрерывности между всеми моими приложениями, я решил использовать следующее в моем коде 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");
  }
}

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

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

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

Только CCS

@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
  body:after{
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 0;
    bottom: 0;
    content: "";
    background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
    background-size: 100% auto;
    opacity: 0.95;
  }
}

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

window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; } 
};

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

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

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

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

Я не согласен с ответом, получившим наибольшее количество голосов. Используйте screen, а не window

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

Это правильный способ сделать это. Если вы рассчитываете с window.height, у вас будут проблемы на Android. Когда клавиатура открыта, окно сжимается. Так что используйте экран вместо окна.

screen.orientation.type - хороший ответ, но с IE. https://caniuse.com/#search=screen.orientation

Получите ориентацию (в любое время в вашем js-коде) через

window.orientation

Когда window.orientation возвращает 0 или 180, вы находитесь в портретном режиме, когда возвращает 90 или 270, вы находитесь в альбомном режиме.

Если у вас установлена ​​последняя версия браузеров, window.orientation может не работать. В этом случае используйте следующий код для получения угла -

var orientation = window.screen.orientation.angle;

Это пока экспериментальная технология, вы можете проверить совместимость браузера здесь

другая альтернатива для определения ориентации, основанная на сравнении ширины / высоты:

var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
     orientation = 'landscape';
} 

Вы используете его в событии "изменение размера":

window.addEventListener("resize", function() { ... });

Вот лучший метод, который я нашел, на основе статьи Дэвида Уолша (Определение изменения ориентации на мобильных устройствах)

if ( window.matchMedia("(orientation: portrait)").matches ) {  
   alert("Please use Landscape!") 
}

Пояснение:

Window.matchMedia () - это собственный метод, который позволяет вы можете определить правило медиа-запроса и проверить его действительность в любой момент времени.

Я считаю полезным прикрепить onchange слушателя к возвращаемому значению этого метода. Пример:

var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }

iOS не обновляет screen.width & screen.height при изменении ориентации. Android не обновляет window.orientation при изменении.

Мое решение этой проблемы:

var isAndroid = /(android)/i.test(navigator.userAgent);

if(isAndroid)
{
    if(screen.width < screen.height){
        //portrait mode on Android
    }
} else {
    if(window.orientation == 0){
        //portrait mode iOS and other devices
    }
}

Вы можете обнаружить это изменение ориентации на Android, а также на iOS с помощью следующего кода:

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

Если событие onorientationchange не поддерживается, привязкой к событию будет событие resize.

Спасибо tobyodavies за то, что указали путь.

Чтобы получить предупреждающее сообщение, основанное на ориентации мобильного устройства, вам необходимо реализовать следующий скрипт в function setHeight() {

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}

Вместо 270 может быть -90 (минус 90).

Это расширяет предыдущий ответ. Лучшее решение, которое я нашел, - создать безобидный атрибут CSS, который появляется только при выполнении медиа-запроса CSS3, а затем выполнить тест JS для этого атрибута.

Так, например, в CSS у вас будет:

@media screen only and (orientation:landscape)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffffe;
    }
}
@media screen only and (orientation:portrait)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffeff;
    }
}

Затем вы переходите к JavaScript (я использую jQuery для забавы). Объявление цвета может быть странным, поэтому вы можете использовать что-нибудь еще, но это самый надежный метод, который я нашел для его тестирования. Затем вы можете просто использовать событие изменения размера, чтобы отслеживать переключение. Сложите все вместе для:

function detectOrientation(){
    //  Referencing the CSS rules here.
    //  Change your attributes and values to match what you have set up.
    var bodyColor = $("body").css("background-color");
    if (bodyColor == "#fffffe") {
        return "landscape";
    } else
    if (bodyColor == "#fffeff") {
        return "portrait";
    }
}
$(document).ready(function(){
    var orientation = detectOrientation();
    alert("Your orientation is " + orientation + "!");
    $(document).resize(function(){
        orientation = detectOrientation();
        alert("Your orientation is " + orientation + "!");
    });
});

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

Я использовал для Android Chrome «API ориентации экрана»

Чтобы посмотреть текущую ориентацию, вызовите console.log (screen.orientation.type) (и, возможно, screen.orientation.angle).

Результаты: портрет-начальный | портрет-средний | пейзаж первичный | пейзаж-вторичный

Ниже мой код, надеюсь, он будет вам полезен:

var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function');
...
if (!isFullscreen()) return;
screen.orientation.lock('landscape-secondary').then(
    function() {
        console.log('new orientation is landscape-secondary');
    },
    function(e) {
        console.error(e);
    }
);//here's Promise
...
screen.orientation.unlock();

• Тестировал только для Android Chrome - ок

Есть способ определить, перевел ли пользователь свое устройство в портретный режим, используя screen.orientation

Просто используйте приведенный ниже код:

screen.orientation.onchange = function () {
     var type = screen.orientation.type;
     if (type.match(/portrait/)) {
         alert('Please flip to landscape, to use this app!');
     }
}

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

Объект окна в JavaScript на устройствах iOS имеет свойство ориентации, которое можно использовать для определения поворота устройства. Ниже показаны значения window.orientation для устройств iOS (например, iPhone, iPad, iPod) в разных ориентациях.

Это решение также работает для устройств Android. Я проверил в родном браузере Android (Интернет-браузере) и в браузере Chrome даже в старых его версиях.

function readDeviceOrientation() {                      
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}

Это то, что я использую.

function getOrientation() {

    // if window.orientation is available...
    if( window.orientation && typeof window.orientation === 'number' ) {

        // ... and if the absolute value of orientation is 90...
        if( Math.abs( window.orientation ) == 90 ) {

              // ... then it's landscape
              return 'landscape';

        } else {

              // ... otherwise it's portrait
              return 'portrait';

        }

    } else {

        return false; // window.orientation not available

    }

}

Выполнение

window.addEventListener("orientationchange", function() {

     // if orientation is landscape...
     if( getOrientation() === 'landscape' ) {

         // ...do your thing

    }

}, false);

Некоторые устройства не предоставляют событие orientationchange, но запускают событие изменения размера окна:

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

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

Следует отметить, что 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);

Или вы могли бы просто использовать это ..

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);