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

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

во время этих перемен, окна.свойство ориентации может измениться. Значение 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");
  }
}

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

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

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

после некоторых экспериментов я обнаружил, что поворот устройства с ориентацией всегда вызывает окно браузера 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);

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

window.orientation

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

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

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

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

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

//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/

//setup 
window.onresize = function(event) {
    window_resize(event);
}

//timeout wrapper points with doResizeCode as callback
function window_resize(e) { 
     window.clearTimeout(resizeTimeoutId); 
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10); 
}

//wrapper for height/width check
function doResizeCode() {
    if(window.innerHeight > window.innerWidth){
        alert("Please view in landscape");
    }
}

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

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

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

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

iOS doens't update screen.width & screen.height при изменении ориентации. Помогите планшет не обновления 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 событие.

$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});

спасибо tobyodavies за руководство пути.

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

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

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

это расширяет предыдущий ответ. Лучшее решение, которое я нашел, - это сделать безобидный атрибут CSS, который появляется только при выполнении запроса CSS3 media, а затем иметь тест 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 для funsies). Объявления цвета могут быть странными, поэтому вы можете использовать что-то еще, но это самый надежный метод, который я нашел для его тестирования. Тогда вы можете просто используйте событие изменения размера, чтобы забрать при переключении. Положите все это вместе для:

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 + "!");
    });
});

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

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

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

---

объяснение:

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

для просмотра текущей консоли вызова ориентации.журнал(Экран.ориентация.тип) (и, возможно, экран.ориентация.угол.)

результаты: портрет-первичный / портрет-вторичный / пейзаж-первичный / пейзаж-вторичный

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

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

screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);

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

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

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

только 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; } 
};

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

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);

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.5.min.js" type="text/javascript"></script>
  <script type="text/javascript">
        window.addEventListener("resize", function() {
            // Get screen size (inner/outerWidth, inner/outerHeight)
            var height = $(window).height();
            var width = $(window).width();

            if(width>height) {
              // Landscape
              $("#mode").text("LANDSCAPE");
            } else {
              // Portrait
              $("#mode").text("PORTRAIT");
            }
        }, false);

  </script>
 </head>
 <body onorientationchange="updateOrientation();">
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

есть способ, с помощью которого вы можете обнаружить, если пользователь перевернул свое устройство в портретном режиме с помощью 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 будет уволен, когда когда-либо пользователь переворачивает устройство и предупреждение всплывет, когда пользователь использует портретный режим.

одна вещь, чтобы отметить о 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);

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

var orientation = window.screen.orientation.angle;

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