Mendeteksi rotasi ponsel Android di browser dengan JavaScript

Saya tahu bahwa di Safari pada iPhone Anda dapat mendeteksi orientasi layar dan mengubah orientasi dengan mendengarkan onorientationchangeacara dan menanyakan window.orientationsudutnya.

Apakah ini dimungkinkan di browser di ponsel Android?

Agar lebih jelas, saya bertanya apakah rotasi perangkat Android dapat dideteksi oleh JavaScript yang berjalan pada halaman web standar. Itu mungkin pada iPhone, dan saya bertanya-tanya apakah itu bisa dilakukan untuk ponsel Android.

Untuk mendeteksi perubahan orientasi pada peramban Android, lampirkan pendengar orientationchangeatau resizeacara di 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);

Periksa window.orientationproperti untuk mencari tahu ke arah mana perangkat ini berorientasi. Dengan ponsel Android, screen.widthatau screen.heightjuga pembaruan saat perangkat diputar. (ini tidak terjadi dengan iPhone).

Perilaku aktual di berbagai perangkat berbeda tidak konsisten . Acara pengubahan ukuran dan orientasi dapat menyala dalam urutan yang berbeda dengan frekuensi yang bervariasi. Juga, beberapa nilai (mis., Screen.width dan window.orientation) tidak selalu berubah ketika Anda mengharapkannya. Hindari screen.width - tidak berubah saat diputar di iOS.

Pendekatan yang andal adalah mendengarkan acara perubahan ukuran dan orientasi (dengan beberapa polling sebagai tangkapan keselamatan), dan Anda akhirnya akan mendapatkan nilai yang valid untuk orientasi. Dalam pengujian saya, perangkat Android kadang-kadang gagal memecat acara ketika memutar 180 derajat penuh, jadi saya juga menyertakan setInterval untuk polling orientasi.

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);

Berikut adalah hasil dari empat perangkat yang telah saya uji (maaf untuk tabel ASCII, tetapi sepertinya cara termudah untuk menyajikan hasilnya). Selain dari konsistensi antara perangkat iOS, ada banyak variasi antar perangkat. CATATAN: Peristiwa terdaftar dalam urutan yang dipecat.

| ================================================= ============================= |
| Perangkat | Acara Dipecat | orientasi | innerWidth | screen.width |
| ================================================= ============================= |
| iPad 2 | mengubah ukuran | 0 | 1024 | 768 |
| (ke lansekap) | perubahan orientasi | 90 | 1024 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPad 2 | mengubah ukuran | 90 | 768 | 768 |
| (untuk potret) | perubahan orientasi | 0 | 768 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | mengubah ukuran | 0 | 480 | 320 |
| (ke lansekap) | perubahan orientasi | 90 | 480 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | mengubah ukuran | 90 | 320 | 320 |
| (untuk potret) | perubahan orientasi | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Telepon Droid | perubahan orientasi | 90 | 320 | 320 |
| (ke lansekap) | mengubah ukuran | 90 | 569 | 569 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Telepon Droid | perubahan orientasi | 0 | 569 | 569 |
| (untuk potret) | mengubah ukuran | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | perubahan orientasi | 0 | 400 | 400 |
| Tablet | perubahan orientasi | 90 | 400 | 400 |
| (ke lansekap) | perubahan orientasi | 90 | 400 | 400 |
| | mengubah ukuran | 90 | 683 | 683 |
| | perubahan orientasi | 90 | 683 | 683 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | perubahan orientasi | 90 | 683 | 683 |
| Tablet | perubahan orientasi | 0 | 683 | 683 |
| (untuk potret) | perubahan orientasi | 0 | 683 | 683 |
| | mengubah ukuran | 0 | 400 | 400 |
| | perubahan orientasi | 0 | 400 | 400 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |

jawaban dua-bit-bodoh yang sangat baik memberikan semua latar belakang, tetapi biarkan saya mencoba ringkasan, pragmatis singkat tentang bagaimana menangani perubahan orientasi di iOS dan Android :

• Jika Anda hanya peduli pada dimensi jendela (skenario tipikal) - dan bukan tentang orientasi spesifik:
  • Tangani resizeacara saja.
  • Di pawang Anda, bertindaklah window.innerWidthdan lakukan window.InnerHeightsaja.
  • JANGAN gunakan window.orientation- ini tidak akan saat ini di iOS.

• Jika Anda Peduli dengan orientasi spesifik :
  • Menangani hanya satu resizeacara pada Android, dan hanya satu orientationchangeacara di iOS.
  • Di handler Anda, aktifkan window.orientation(dan window.innerWidthdan window.InnerHeight)

Pendekatan ini menawarkan sedikit manfaat daripada mengingat orientasi sebelumnya dan membandingkan:

• pendekatan dimensi saja juga berfungsi saat berkembang pada browser desktop yang dapat mensimulasikan perangkat seluler, misalnya, Chrome 23. ( window.orientationtidak tersedia di browser desktop).
• tidak perlu untuk variabel tingkat global / anonim-file-fungsi-wrapper-level.

Anda selalu dapat mendengarkan acara pengubahan ukuran jendela. Jika, pada kejadian itu, jendelanya berubah dari lebih tinggi daripada lebar menjadi lebih lebar daripada tinggi (atau sebaliknya), Anda dapat yakin orientasi telepon baru saja diubah.

Itu mungkin dalam HTML5.
Anda dapat membaca lebih lanjut (dan coba demo langsung) di sini: http://slides.html5rocks.com/#slide-orientation .

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

Ini juga mendukung browser deskop tetapi akan selalu mengembalikan nilai yang sama.

Saya memiliki masalah yang sama. Saya menggunakan Phonegap dan Jquery mobile, untuk perangkat Adroid. Untuk mengubah ukuran dengan benar, saya harus mengatur batas waktu:

$(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);
}

Ini solusinya:

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");
            }   
        });
    }

Gotcha lain - beberapa tablet Android (Motorola Xoom yang saya percaya dan Elonex low-end yang saya coba beberapa pengujian, mungkin juga yang lain) memasang accelerometer sehingga window.orientation == 0 dalam mode LANDSCAPE, bukan potret !

Anda dapat mencoba solusinya, kompatibel dengan semua browser.

Berikut ini adalah orientationchangegambar kompatibilitas: oleh karena itu, saya membuat orientaionchangepolyfill, ini berdasarkan pada atribut @media untuk memperbaiki pustaka orientasichangechange—— orientasichange-fix

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

Perlu dicatat bahwa pada Epic 4G Touch saya, saya harus mengatur tampilan web untuk menggunakan WebChromeClient sebelum salah satu panggilan android javascript bekerja.

webView.setWebChromeClient(new WebChromeClient());

Cara lintas browser

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

Sedikit kontribusi untuk jawaban dua-bit-bodoh:

Seperti yang dijelaskan pada tabel pada ponsel "acara perubahan orientasi" dipecat lebih awal dari peristiwa "mengubah ukuran" sehingga memblokir panggilan perubahan ukuran berikutnya (karena pernyataan if). Properti lebar masih belum ditetapkan.

Sebuah solusi meskipun mungkin bukan yang sempurna bisa dengan tidak memecat acara "orientasi perubahan". Itu bisa diarsipkan dengan membungkus acara "orientasi perubahan" yang mengikat pernyataan "jika":

if (!navigator.userAgent.match(/android/i))
{
    window.addEventListener("orientationchange", checkOrientation, false);
}

Semoga ini bisa membantu

(tes dilakukan pada Nexus S)