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

Question

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

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

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

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

Answer 1

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

window.orientation

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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.

Answer 5

//see also /576969/sobytie-izmeneniya-razmera-okna-javascript
//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");
    }
}

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

Answer 10

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