web-dev-qa-db-ja.com

JavaScriptを使用して、ブラウザーでAndroid電話の回転を検出する

IPhoneのSafariでは、onorientationchangeイベントをリッスンし、window.orientationに角度を照会することで、画面の向きと向きの変化を検出できることを知っています。

これは、Android電話のブラウザで可能ですか？

明確にするために、標準のWebページでJavaScriptを実行することで、Androidデバイスの回転を検出できるかどうかを尋ねています。 iPhoneでも可能ですが、Android電話でできるかどうか疑問に思いました。

javascriptandroidwebkit
181
philnash

Androidブラウザーで方向の変更を検出するには、orientationchangeのresizeまたはwindowイベントにリスナーをアタッチします。

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

window.orientationプロパティをチェックして、デバイスの向きを確認します。 Android電話では、screen.widthまたはscreen.heightもデバイスの回転に合わせて更新されます。 （これはiPhoneには当てはまりません）。

208
jb.

実際の異なるデバイス間での動作は一貫していません。 resizeイベントとorientationChangeイベントは、さまざまな頻度で異なるシーケンスで起動できます。また、一部の値（screen.widthやwindow.orientationなど）は、期待したときに常に変化するとは限りません。 screen.widthを避ける-iOSで回転しても変化しません。

信頼できるアプローチは、resizeイベントとorientationChangeイベントの両方をリッスンすることです（いくつかのポーリングを安全なキャッチとして）、そして最終的にオリエンテーションの有効な値を取得します。私のテストでは、Androidデバイスは完全に180度回転するとイベントを発生できないことがあるため、方向をポーリングするためのsetIntervalも含めました。

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);

ここに、私がテストした4つのデバイスの結果を示します（ASCIIテーブルについては申し訳ありませんが、結果を表示する最も簡単な方法のようです）。 iOSデバイス間の一貫性は別として、デバイスにはさまざまな種類があります。注：イベントは、発生した順にリストされます。

 | ============================================ ================================== [
 |デバイス|発生したイベント|オリエンテーション| innerWidth | screen.width | 
 | ======================================= ====================================== | 
 | iPad 2 |サイズ変更| 0 | 1024 | 768 | 
 | （風景へ）|方向変更| 90 | 1024 | 768 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | iPad 2 |サイズ変更| 90 | 768 | 768 | 
 | （ポートレートへ）|方向変更| 0 | 768 | 768 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | iPhone 4 |サイズ変更| 0 | 480 | 320 | 
 | （風景へ）|方向変更| 90 | 480 | 320 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | iPhone 4 |サイズ変更| 90 | 320 | 320 | 
 | （ポートレートへ）|方向変更| 0 | 320 | 320 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 |ドロイドフォン|方向変更| 90 | 320 | 320 | 
 | （風景へ）|サイズ変更| 90 | 569 | 569 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 |ドロイドフォン|方向変更| 0 | 569 | 569 | 
 | （ポートレートへ）|サイズ変更| 0 | 320 | 320 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | Samsung Galaxy |方向変更| 0 | 400 | 400 | 
 |タブレット|方向変更| 90 | 400 | 400 | 
 | （風景へ）|方向変更| 90 | 400 | 400 | 
 | |サイズ変更| 90 | 683 | 683 | 
 | |方向変更| 90 | 683 | 683 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- | 
 | Samsung Galaxy |方向変更| 90 | 683 | 683 | 
 |タブレット|方向変更| 0 | 683 | 683 | 
 | （ポートレートへ）|方向変更| 0 | 683 | 683 | 
 | |サイズ変更| 0 | 400 | 400 | 
 | |方向変更| 0 | 400 | 400 | 
 | ---------------- + ------------------- + ----- -------- + ------------ + -------------- |
222
two-bit-fool

two-bit-foolの優れた答えはすべての背景を提供しますが、iOSとAndroidでの向きの変更を処理する方法の簡潔で実用的な要約：

  • ウィンドウの寸法（典型的なシナリオ）-のみに関心があり、特定の向きには関心がない場合：
    • resizeイベントのみを処理します。
    • ハンドラーでは、window.innerWidthおよびwindow.InnerHeightのみを操作します。
    • window.orientationを使用しないでください-iOSでは最新になりません。
  • 特定の方向を気にする場合：
    • onlyAndroidのresizeイベント、およびonlyのorientationchangeイベントの処理iOS。
    • ハンドラーで、window.orientation（およびwindow.innerWidthおよびwindow.InnerHeight）を操作します

これらのアプローチには、以前のオリエンテーションを覚えて比較するよりもわずかな利点があります。

  • 寸法のみのアプローチは、モバイルデバイスをシミュレートできるデスクトップブラウザーでの開発中にも機能します（例：Chrome 23.（window.orientationはデスクトップブラウザーでは使用できません）。
  • グローバル/匿名ファイルレベル関数ラッパーレベル変数は必要ありません。
39
mklement0

常にウィンドウのサイズ変更イベントをリッスンできます。そのイベントで、ウィンドウの幅が高さから幅よりも広くなった場合（またはその逆）、電話の向きがちょうど変更されたことを確認できます。

12
Joel Mueller

同じ問題がありました。 Androidデバイス用にPhonegapとJquery mobileを使用しています。適切にサイズを変更するには、タイムアウトを設定する必要がありました。

$(window).bind('orientationchange',function(e) {
  fixOrientation();
});

$(window).bind('resize',function(e) {
  fixOrientation();
});

function fixOrientation() {

    setTimeout(function() {

        var windowWidth = window.innerWidth;

        $('div[data-role="page"]').width(windowWidth);
        $('div[data-role="header"]').width(windowWidth);
        $('div[data-role="content"]').width(windowWidth-30);
        $('div[data-role="footer"]').width(windowWidth);

    },500);
}
3
tauanz

HTML5でも可能です。
ここで詳細を読むことができます（そしてライブデモを試してください） http://slides.html5rocks.com/#slide-orientation 。

window.addEventListener('deviceorientation', function(event) {
    var a = event.alpha;
    var b = event.beta;
    var g = event.gamma;
}, false);

また、deskopブラウザーもサポートしますが、常に同じ値を返します。

3
Derek 朕會功夫

解決策は次のとおりです。

var isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent);
    },
    iOS: function() {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
};
if(isMobile.Android())
    {
        var previousWidth=$(window).width();
        $(window).on({
        resize: function(e) {
        var YourFunction=(function(){

            var screenWidth=$(window).width();
            if(previousWidth!=screenWidth)
            {
                previousWidth=screenWidth;
                alert("oreientation changed");
            }

        })();

        }
    });

    }
    else//mainly for ios
    {
        $(window).on({
            orientationchange: function(e) {
               alert("orientation changed");
            }   
        });
    }
2
Shishir Arora

別の落とし穴-いくつかのAndroidタブレット（私が信じているMotorola Xoomと私がテストしているローエンドのElonexのもの、おそらく他のものも）は、window.orientation == 0になるように加速度計をセットアップしています横向きモードでは、ポートレートではありません！

1
james-geldart

すべてのブラウザと互換性のあるソリューションを試すことができます。

以下はorientationchange互換性写真です。 compatibility したがって、私はorientaionchangeポリフィルを作成します。これは、orientationchangeユーティリティライブラリを修正する@media属性に基づいています—— orientationchange-fix

window.addEventListener('orientationchange', function(){
 if(window.neworientation.current === 'portrait|landscape'){
    // do something……
 } else {
    // do something……
 }
}, false);
1
Zhansingsong

クロスブラウザの方法

$(window).on('resize orientationchange webkitfullscreenchange mozfullscreenchange fullscreenchange',  function(){
//code here
});
0
comonitos

私のEpic 4G Touchでは、javascript Android呼び出しが機能する前にWebChromeClientを使用するようにwebviewを設定する必要があったことに注意してください。

webView.setWebChromeClient(new WebChromeClient());
0
calebisstupid