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

Я будую веб-сайт спеціально для мобільних пристроїв. Зокрема, є одна сторінка, яку найкраще переглядати в ландшафтному режимі.

Чи є спосіб виявити, чи користувач, який відвідує цю сторінку, переглядає її в портретному режимі, і якщо так, відобразити повідомлення, яке сповіщає користувача про те, що сторінку найкраще переглядати в альбомному режимі? Якщо користувач уже переглядає його в альбомному режимі, повідомлення не з’явиться.

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

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

jQuery Mobile має подію, яка обробляє зміну цього властивості ... якщо ви хочете попередити, якщо хтось обертається пізніше - orientationchange

Крім того, після деякого поглинання, перевірте 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значення
• Порівняйте innerHeightvs.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");
  }
}

Не намагайтесь виправити запити на виправлення орієнтації windows (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';
} 

Ви використовуєте його у події "зміни розміру":

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) (і, можливо, екран.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) в різних напрямках.

Це рішення також працює і для андроїд-пристроїв. Я перевірив андроїд в домашньому браузері (Інтернет-браузері) та в браузері 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);