35

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

4

9 に答える 9

46

アップデート：

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

jQuery mobileorientationchange

またはプレーン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>
于 2011-03-31T11:24:41.293 に答える
8

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

window.addEventListener('orientationchange', function(event) {
     /* update layout per new orientation */
});
于 2012-09-21T15:33:08.773 に答える
5

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

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

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

于 2014-11-09T12:11:30.630 に答える
1

「クロスデバイス、クロスブラウザポートレート-風景検出」より

これは、モバイルデバイスが縦向きモードか横向きモードかを確認することです。その向きを気にする必要はありません。ご存知のとおり、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();
于 2016-05-27T23:52:39.603 に答える
1

このスレッドでデバイスを上下逆さまにしたときに何が起こるかについては誰も言及していないことに気づきました。 window.orientation水平に保持すると-90または90を返します。垂直に保持すると0または180を返します。一部のデバイスは、逆さまに保持することをサポートしますが、サポートしません。私はお勧め、

window.addEventListener("orientationchange", function() {
  
  if ( window.orientation == 0 || window.orientation == 180) {
    // WHEN IN PORTRAIT MODE
    
  } else {
    // WHEN IN LANDSCAPE MODE
    
  }
}, false);

また、デスクトップでwindow.orientation戻ることに注意してください。undefined

于 2020-07-13T20:32:56.300 に答える
0

window.orientationはあなたが探しているものです。onOrientationChangeイベントは、Android、iPhone、およびiPadで機能することもあります。

于 2011-03-31T11:23:57.783 に答える
0

@mplungjanの回答に加えて、Webkitの「ネイティブ」（実際にはどのように呼ぶかはわかりません）イベント「deviceorientation」を使用すると、より良い結果が得られました。

Mozilla Developerネットワークでは、この問題を解決するのに役立ったWebkitとGeckoの間で正規化する方法についての良い説明があります。

于 2011-11-04T18:58:24.660 に答える
0

使いやすいスニペット：

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();
于 2015-03-25T15:35:26.973 に答える
-1

2021年現在

これでいいのですが

let theDeviceIsRotated;
function handlePortraitOrLandscape() {
  setTimeout(afterAnUnnoticableDelay,100); // This solves the wrong-firing-order issue on Samsung Browser.
  function afterAnUnnoticableDelay() {
    if (screen.orientation) { // Mainly for Android (as of 2021)
      // document.getElementById('or7on').innerHTML = screen.orientation.angle; // Returns 0 or 90 or 270 or 180 // Create a div with ID: "or7on" and uncomment to test
      if (screen.orientation.angle == 0)   {    theDeviceIsRotated="no";     }
      if (screen.orientation.angle == 90)  {    theDeviceIsRotated="toTheLeft";     }
      if (screen.orientation.angle == 270) {    theDeviceIsRotated="toTheRight";     }
      if (screen.orientation.angle == 180) {    theDeviceIsRotated="upsideDown";     }
    } else { // Mainly for iOS (as of 2021)
      // document.getElementById('or7on').innerHTML = window.orientation; // Returns 0 or 90 or -90 or 180 // Create a div with ID: "or7on" and uncomment to test
      if (window.orientation == 0)   {    theDeviceIsRotated="no";     }
      if (window.orientation == 90)  {    theDeviceIsRotated="toTheLeft";     }
      if (window.orientation == -90) {    theDeviceIsRotated="toTheRight";     }
      if (window.orientation == 180) {    theDeviceIsRotated="upsideDown";     }
    }
  }
}
handlePortraitOrLandscape(); // Set for the first time
window.addEventListener("resize",handlePortraitOrLandscape); // Update when change happens
于 2021-10-17T17:35:02.833 に答える