web-dev-qa-db-ja.com

JavaScriptを使用して向きの変化を検出する

JavaScriptを使用して、iPadまたはGalaxy Tabのブラウザーの向きの変化を検出することはできますか？ CSSメディアクエリを使用することは可能だと思います。

javascriptcssipadaccelerometergalaxy-tab
23
manraj82

UPDATE：

あなたはチェックアウトしたいかもしれません

jQuery mobile orientationchange

またはプレーンな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/

IPadのSafariは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)

デバイスが回転したときにウィンドウオブジェクトで発生するorientationchangeイベントもあります。

次のように、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>
27
mplungjan

次のようにorientationchangeイベントを使用できます。

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

使いやすいスニペット：

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();
0
Bryan Dartout

「 クロスデバイス、クロスブラウザのポートレート-ランドスケープ検出 "から

これは、モバイルデバイスが縦向きモードか横向きモードかを調べることです。その向きを気にする必要はありません。ご存知のように、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();
0
lowtechsun

@mplungjanの回答に加えて、Webkitの「ネイティブ」（私は実際にそれを呼び出す方法はありません）イベントを使用してより良い結果を見つけました、 'deviceorientation '。

Mozilla Developer network では、webkitとGeckoを正規化する方法について、この問題を解決するのに役立ちました。

0
Hugo

window.orientationはあなたが探しているものです。 onOrientationChangeイベントもあり、Android、iphone、そしてほぼ確実にipadで動作します

0
hachev

mediaMatch を使用して、CSSメディアクエリを評価できます。

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

CSSメディアクエリは、orientationchangeの前に起動します。イベントの終了をキャプチャする場合（回転が完了したとき）は、 向き変更後のモバイルビューポートの高さ を参照してください。

0
Gajus