Обнаружить изменение в ориентации, используя JavaScript

Question

Можно ли обнаружить изменение ориентации браузера на iPad или Galaxy Tab с помощью javascript? Я думаю, что это возможно с помощью медиа-запросов CSS.

Answer 1

ОБНОВЛЕНИЕ:

Возможно, вы захотите проверить

jQuery mobile directionchangechange

или обычный JS:

window.addEventListener("orientationchange", function() {
  alert(window.orientation);
}, false);

MDN:

window.addEventListener("orientationchange", function() {
    alert("the orientation of the device is now " + screen.orientation.angle);
});

---

Предыдущий ответ

http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/

Safari на iPad поддерживает свойство window.orientation, поэтому при необходимости вы можете использовать его, чтобы определить, находится ли пользователь в горизонтальном или вертикальном режиме.В качестве напоминания об этой функциональности:

window.orientation is 0 when being held vertically
window.orientation is 90 when rotated 90 degrees to the left (horizontal)
window.orientation is -90 when rotated 90 degrees to the right (horizontal)

Существует также событие directionalchange, которое запускается в объекте окна при повороте устройства.

Вы также можете использовать медиазапросы CSS, чтобы определить,iPad удерживается в вертикальном или горизонтальном положении, например:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

---

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

<script type="text/javascript">
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>

Answer 2

Вы можете использовать событие directionalchange следующим образом:

window.addEventListener('orientationchange', function(){
     /* update layout per new orientation */
});

Answer 3

Из " Обнаружение портретного и горизонтального кросс-браузерного устройства "

Это информация о том, находится ли мобильное устройство в портретном или альбомном режиме; вам не нужно заботиться о его ориентации. Насколько вы знаете, если вы держите свой iPad вверх ногами, он находится в портретном режиме.

$(window).bind("resize", function(){
    screenOrientation = ($(window).width() > $(window).height())? 90 : 0;
});

90 означает пейзаж, 0 означает портрет, кросс-браузер, кросс-устройство.

Событие window.onresize доступно везде и всегда запускается в нужное время; никогда не рано, никогда не поздно. На самом деле размер экрана также всегда точен.

Версия JavaScript будет такой, поправьте меня, пожалуйста, если я ошибаюсь.

  function getScreenOrientation() {
    screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0;
    console.log("screenOrientation = " + screenOrientation);
  }
  window.addEventListener("resize", function(event) {
    getScreenOrientation();
  });
  getScreenOrientation();

Answer 4

Простой в использовании фрагмент:

function doOnOrientationChange()
{
    switch(window.orientation)
    { 
        case -90:
        case 90:
          // alert('landscape');
          $('#portrait').css({display:'none'});
          $('#landscape').css({display:'block'});

          break;
        default:
          // alert('portrait');
          $('#portrait').css({display:'block'});
          $('#landscape').css({display:'none'});
          break;
    }
}

window.addEventListener('orientationchange', doOnOrientationChange);

// First launch
doOnOrientationChange();

Answer 5

Вы можете использовать mediaMatch для оценки медиазапросов CSS, например,

window
    .matchMedia('(orientation: portrait)')
    .addListener(function (m) {
        if (m.matches) {
            // portrait
        } else {
            // landscape
        }
    });

CSS медиазапрос запускается до orientationchange.Если вы хотите зафиксировать конец события (когда вращение завершено), см. высота мобильного видового экрана после изменения ориентации .

Answer 6

Добавляя к ответу @mplungjan, я нашел лучшие результаты, используя событие "native" (не знаю, как его называть) в webkit, ' deviceorientation '.

В сети Mozilla Developer у них есть хорошее объяснение того, как нормализовать работу Webkit и Gecko, которые помогли мне решить эту проблему.

Answer 7

window.orientation - это то, что вы ищете. есть также событие onOrientationChange работает на Android, Iphone и, я в основном уверен, для Ipad