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

195

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

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

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

Дэн
источник

Ответы:

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

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

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

tobyodavies
источник
6
Нет, к сожалению нет. Тем не менее, следующий сценарий сработал: if (window.innerHeight> window.innerWidth) {alert ("Please view in landscape"); }
Дан
8
Я переосмыслил проблему. Это круто. Так просто.
77
На многих устройствах, когда клавиатура отображается, доступная ширина будет больше, чем высота, неправильно давая альбомную ориентацию.
Пьер
1
Это не работает, если сочетается с orientationchangeсобытием. Он покажет старую ориентацию вместо новой ориентации. Этот ответ хорошо работает в сочетании с orientationchangeсобытием.
Дональд Дак
2
window.orientation устарела developer.mozilla.org/en-US/docs/Web/API/Window/orientation
kluverua
163

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

crmpicco
источник
3
Поддержка этой функции довольно слабая: caniuse.com/#feat=matchmedia
Ашитака
2
В Firefox для Android работает нормально только после события DOM ready для меня.
Инверсия
13
Поддержка этого сейчас намного сильнее. Это кажется гораздо более надежным ответом, чем принятый.
JonK
2
Остерегайтесь этого с этим (ссылка) раствор stackoverflow.com/questions/8883163/...
dzv3
2
Это правильный ответ сейчас. Эта функция имеет полную поддержку всех соответствующих браузеров.
Телариан
97

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

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

Jatin
источник
2
На Nexus 10, и я не знаю о других планшетах Android 10 ", значения обратные. Т.е. 0 возвращается, когда устройство находится в альбомной ориентации, а не в портретной ориентации. Ответ выше tobyodavies, кажется, работает хорошо, хотя на всех устройствах, которые я проверено
Натан
8
Ориентация 0 задается как «естественная» ориентация устройства и, таким образом, зависит от поставщика. Это может быть портрет или пейзаж ...
Pierre
на ipad в iframe ничего не предупредил
Darius.V
2
это не хорошее решение для определения ориентации мод устройства. Потому что возвращаемое значение зависит от естественной ориентации устройства. Пример для Samsung 7 'планшетное портретное представление возвращает 90, но на Nexus 4 для портретного они возвращают 0.
Dexter_ns88
3
По этой ссылке: notes.matthewgifford.com/… Автор демонстрирует разные устройства разных производителей, которые по-разному интерпретируют ландшафт и портрет. Отсюда и разные сообщаемые значения, на которые вы не можете реально положиться.
Neon Warge
36

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

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}
Томас Деко
источник
Лучший ответ для меня, потому что вам не нужен слушатель для изменения ориентации. Хотя я комбинирую его с Modernizr, чтобы определить, является ли это сенсорным устройством, поскольку оно не имеет смысла на экранах настольных компьютеров или ноутбуков. Все еще не подходит для таких экранов с сенсорными возможностями ...
Esger
4
Не имеет отношения к JavaScript. ОП нуждается в решении JavaScript.
16
10
Нет, он хочет отобразить сообщение, вы можете использовать display: none затем display: block для отображения чего-либо.
Томас Деко
2
Какова поддержка для этой проверки CSS?
ChrisF
1
Я не знаю, но я не нашел мобильный телефон, который не поддерживает его. Кроме того, он кажется сломанным на старом Android, когда клавиатура появляется иногда, медиа-запрос срабатывает.
Томас Деко
21

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

  • Проверьте 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);
    });
});
Martynas
источник
10

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

if (screen.height > screen.width){
    alert("Please use Landscape!");
}
artnikpro
источник
Это работает в IE 10, Firefox 23 и Chrome 29 (все настольные браузеры).
Якоб Дженков
1
Все основные браузеры поддерживают это. IE 7 также
artnikpro
хотя и не стандартный: developer.mozilla.org/en-US/docs/Web/API/…
fjsj
@ Дункан Нет. Это работает на мобильном телефоне. Это довольно старый метод, и он поддерживается в старых браузерах Safari и Android. Это может быть не очень точно с сетчаткой, но для определения ориентации области просмотра она должна работать нормально
artnikpro
1
@artnikpro Я тестировал вчера, и похоже, что Safari возвращает физические размеры экрана, игнорируя ориентацию. Таким образом, screen.width - это всегда физическая ширина экрана.
Дункан Хогган,
9

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

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

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

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

kev666n
источник
я не думаю, что это больше не правда
старик
5

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

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}
Дэйв Саг
источник
1
Посмотрите выше, почему 90 => ландшафт не то, на что вы можете положиться на разных устройствах.
ChrisF
5

Я объединил два решения, и оно прекрасно работает для меня.

window.addEventListener("orientationchange", function() {                   
    if (window.matchMedia("(orientation: portrait)").matches) {
       alert("PORTRAIT")
     }
    if (window.matchMedia("(orientation: landscape)").matches) {
      alert("LANSCAPE")
     }
}, false);
ARTniyet
источник
5

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

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

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

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

Stefdelec
источник
4

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

window.orientation

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

SliQ
источник
1
Он не возвращает 270, но возвращает -90.
Фелипе Корреа
@FelipeCorrea Ответ 2 года!
Sliq
2
Я уточнил, чтобы сделать его действительным для новых посетителей. Это помогло мне, кстати.
Фелипе Корреа
window.orientation устарела
Джонни
4

Только 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; } 
};
cptstarling
источник
1
Я знаю, что не должен, но я должен был сказать спасибо за это, это отличное решение.
FalsePozitive
4
$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});
Джомин Джордж Пол
источник
к сожалению, не поддерживается Safari
Джеспер Лехтинен
2
//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");
    }
}
Адольф Трюдо
источник
2

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

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

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

window.addEventListener("resize", function() { ... });
Грегор Срдич
источник
2

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

Дрема
источник
2

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

var orientation = window.screen.orientation.angle;

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

Атул Кумар
источник
1

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

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

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}
Dan
источник
1

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

zeuf
источник
1

Это расширяет предыдущий ответ. Лучшее решение, которое я нашел, - создать безобидный атрибут 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 + "!");
    });
});

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

Джош С
источник
Как примечание, Windows 10 и Edge могут вбить в это рывок - я еще не проводил серьезного тестирования на новой платформе, но, по крайней мере, на первый взгляд кажется, что он может предоставлять данные об ориентации в браузер. Все еще возможно построить свой сайт вокруг этого, но это определенно кое-что, о чем нужно знать.
Джош С
1

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

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") }
Shibl
источник
1

Я использовал для 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 - хорошо
Дмитрий Соколюк
источник
1
screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);
zloctb
источник
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код. Также постарайтесь не переполнять ваш код пояснительными комментариями, так как это снижает удобочитаемость кода и пояснений!
До свидания StackExchange
Этот ответ не решает проблему в исходном вопросе. Он показывает, как регистрировать изменения ориентации, но не показывает, как отображать сообщение только в одной конкретной ориентации.
Джулиан
1

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

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

function readDeviceOrientation() {                      
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}
Дмитрий Медвид
источник
1

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

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);
КТР
источник
0
<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>
Гаурав Кумар MVC Эксперт
источник
0

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

Naman
источник
0

Стоит отметить, 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);
Гарри Стивенс
источник
0

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

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);
Брэдли
источник