JavaScript ile Android telefonun tarayıcıdaki dönüşünü algılama

Bir iPhone'daki Safari'de, onorientationchangeolayı dinleyerek window.orientationve açıyı sorgulayarak ekranın yönünü ve yön değişikliğini algılayabileceğinizi biliyorum .

Bu, Android telefonlardaki tarayıcıda mümkün mü?

Açık olmak gerekirse, bir Android cihazının rotasyonunun standart bir web sayfasında çalışan JavaScript tarafından tespit edilip edilemeyeceğini soruyorum . Bir iPhone'da mümkün ve Android telefonlar için yapılıp yapılamayacağını merak ettim.

Android tarayıcıda bir yönlendirme değişikliği saptamak için şu adrese orientationchangeveya resizeetkinliğe bir dinleyici ekleyin 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.orientationCihazın hangi yöne yönlendirildiğini anlamak için özelliği kontrol edin . Android telefonlarda screen.widthveya screen.heightcihaz döndürüldüğünde güncellenir. (iPhone'da durum böyle değil).

Farklı aygıtlar arasındaki gerçek davranış tutarsız . Resize ve orientationChange olayları, değişen sıklıkta farklı bir sırada tetiklenebilir. Ayrıca, bazı değerler (örn. Screen.width ve window.orientation) beklediğinizde her zaman değişmez. Screen.width'den kaçının - iOS'ta döndürürken değişmez.

Güvenilir yaklaşım, hem yeniden boyutlandırma hem de yönlendirme dinlemektir Olayları değiştirin (bazıları güvenlik yakalama olarak yoklama ile) ve sonunda yönlendirme için geçerli bir değer elde edersiniz. Testlerimde, Android cihazlar bazen tam 180 derece döndürürken olayları tetikleyemedi, bu yüzden yönlendirmeyi yoklamak için bir setInterval ekledim.

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

İşte test ettiğim dört cihazdan sonuçlar (ASCII tablosu için özür dilerim, ancak sonuçları sunmanın en kolay yolu gibi görünüyordu). İOS cihazlar arasındaki tutarlılığın yanı sıra, cihazlar arasında çok çeşitli var. NOT: Olaylar tetiklendikleri sırayla listelenir.

| ================================================= ============================= |
| Cihaz | Yapılan Etkinlikler | yönlendirme | innerWidth | screen.width |
| ================================================= ============================= |
| iPad 2 | yeniden boyutlandırma | 0 | 1024 | 768 |
| (manzaraya) | oryantasyon değişimi | 90 | 1024 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPad 2 | yeniden boyutlandırma | 90 | 768 | 768 |
| (portreye) | oryantasyon değişimi | 0 | 768 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | yeniden boyutlandırma | 0 | 480 | 320 |
| (manzaraya) | oryantasyon değişimi | 90 | 480 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | yeniden boyutlandırma | 90 | 320 | 320 |
| (portreye) | oryantasyon değişimi | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Droid telefon | oryantasyon değişimi | 90 | 320 | 320 |
| (manzaraya) | yeniden boyutlandırma | 90 | 569 | 569 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Droid telefon | oryantasyon değişimi | 0 | 569 | 569 |
| (portreye) | yeniden boyutlandırma | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | oryantasyon değişimi | 0 | 400 | 400 |
| Tablet | oryantasyon değişimi | 90 | 400 | 400 |
| (manzaraya) | oryantasyon değişimi | 90 | 400 | 400 |
| | yeniden boyutlandırma | 90 | 683 | 683 |
| | oryantasyon değişimi | 90 | 683 | 683 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | oryantasyon değişimi | 90 | 683 | 683 |
| Tablet | oryantasyon değişimi | 0 | 683 | 683 |
| (portreye) | oryantasyon değişimi | 0 | 683 | 683 |
| | yeniden boyutlandırma | 0 | 400 | 400 |
| | oryantasyon değişimi | 0 | 400 | 400 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |

iki bit aptalın mükemmel yanıtı tüm arka planı sağlar, ancak iOS ve Android'de yön değişikliklerini nasıl ele alacağınıza dair kısa ve pragmatik bir özet sunmaya çalışalım :

• Belirli pencere yönünü değil , yalnızca pencere boyutlarını (tipik senaryo) önemsiyorsanız :
  • Kulp resizeolayı sadece.
  • İşleyicinizde sadece window.innerWidthve window.InnerHeightsadece harekete geçin .
  • KULLANMAYIN window.orientation- iOS'ta güncel olmayacaktır.

• Belirli bir yönü önemsiyorsanız :
  • Kulp sadeceresize Android'de olayı ve sadeceorientationchange iOS'da olayı.
  • İşleyicinizde harekete geçin window.orientation(ve window.innerWidthve window.InnerHeight)

Bu yaklaşımlar, önceki yönelimi hatırlamak ve karşılaştırmaktan biraz fayda sağlar:

• yalnızca boyutlar yaklaşımı, mobil cihazları, örneğin Chrome 23'ü ( window.orientationmasaüstü tarayıcılarda kullanılamaz) simüle edebilen masaüstü tarayıcılarda geliştirirken de çalışır .
• genel / anonim dosya-düzeyi-işlev-sarmalayıcı düzeyi değişkenine gerek yoktur.

Pencere yeniden boyutlandırma olayını her zaman dinleyebilirsiniz. Bu olayda, pencere uzun boylu olmaktan uzun boylu olmaktan uzun boylu olmaktan geniş (veya tam tersi) olursa, telefon yönünün değiştiğinden emin olabilirsiniz.

HTML5'te mümkündür.
Buradan daha fazla bilgi edinebilir (ve canlı bir demo deneyebilirsiniz): http://slides.html5rocks.com/#slide-orientation .

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

Ayrıca masaüstü tarayıcılarını da destekler, ancak her zaman aynı değeri döndürür.

Ben de aynı problemi yaşadım. Adroid cihazları için Phonegap ve Jquery mobile kullanıyorum. Doğru şekilde yeniden boyutlandırmak için bir zaman aşımı ayarlamalıydım:

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

İşte çözüm:

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

Başka bir gotcha - bazı Android tabletler (inandığım Motorola Xoom ve üzerinde bazı testler yaptığım düşük seviye Elonex biri, muhtemelen diğerleri de) ivmeölçerleri ayarlandı, böylece pencere değil. Oryantasyon == 0 LANDSCAPE modunda, portre değil !

tüm tarayıcılarla uyumlu çözümü deneyebilirsiniz.

Aşağıda orientationchangeuyumluluk resmi: bu nedenle, bir yazar orientaionchangepolyfill bir düzeltme orientationChange, kuruluşun library-- için @media öznitelik dayanmaktadır orientationChange-fix

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

Epic 4G Touch cihazımda, herhangi bir javascript android çağrısı işe başlamadan önce WebChromeClient'i kullanmak için web görünümünü ayarlamak zorunda olduğumu belirtmek gerekir.

webView.setWebChromeClient(new WebChromeClient());

Çapraz tarayıcı yolu

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

İki bit aptalın cevabına küçük bir katkı:

Droid telefonları tabloda açıklandığı gibi "orientationchange" olayı "resize" olayından daha önce tetiklenir, böylece bir sonraki yeniden boyutlandırma çağrısını engeller (if ifadesi nedeniyle). Width özelliği hala ayarlanmadı.

Mükemmel bir çözüm olmasa da bir çözüm "orientationchange" olayını tetiklememek olabilir. Bu, "if" deyimindeki "orientationchange" olay bağlama sarmalanarak arşivlenebilir:

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

Umarım yardımcı olur

(testler Nexus S üzerinde yapıldı)