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

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

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

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

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

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

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

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

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

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

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

//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';
} 

Вы используете его для события "resize":

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

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событие.

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

var orientation = window.screen.orientation.angle;

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

Спасибо 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 + "!");
    });
});

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

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

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") }

Я использовал для 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.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);

Объект окна в 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);

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