जावास्क्रिप्ट के साथ ब्राउज़र में एंड्रॉइड फोन के रोटेशन का पता लगाएं

Question

मुझे पता है कि एक iPhone पर सफारी में आप स्क्रीन के अभिविन्यास और अभिविन्यास के परिवर्तन का पता लगा सकते हैं, जो onorientationchangeईवेंट के लिए सुनकर और window.orientationकोण के लिए क्वेरी कर सकता है।

क्या एंड्रॉइड फोन पर ब्राउज़र में यह संभव है?

स्पष्ट होने के लिए, मैं पूछ रहा हूं कि क्या एक मानक वेब पेज पर चल रहे जावास्क्रिप्ट द्वारा एंड्रॉइड डिवाइस के रोटेशन का पता लगाया जा सकता है । यह एक iPhone पर संभव है, और मुझे आश्चर्य है कि क्या यह एंड्रॉइड फोन के लिए किया जा सकता है।

Answer 1

एंड्रॉइड ब्राउज़र पर एक अभिविन्यास परिवर्तन का पता लगाने के लिए, एक श्रोता को उस पर 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डिवाइस को उन्मुख करने का तरीका जानने के लिए संपत्ति की जांच करें । एंड्रॉइड फोन के साथ, screen.widthया screen.heightडिवाइस को घुमाए जाने के रूप में भी अपडेट करता है। (यह iPhone के साथ ऐसा नहीं है)।

Comments

क्या यह वास्तव में काम करता है? मैंने jquery $ (विंडो) .bind ("ओरिएंटचेंज", fn) आज़माया; लेकिन यह काम नहीं किया, क्या मुझे ऊपर दिए गए फॉर्म का उपयोग करना है? मैं करने की कोशिश की "onorientationchange" विंडो में, यह गलत retuns

— Ayyash

यह अच्छा काम करता है। अय्याश - यहाँ पूरी बात यह है कि जब "ओरिएंटचेंज" का समर्थन नहीं किया जाता है तो यह "रिसाइज" में वापस आ जाएगा

— Dror

Droid पर यह पूरी तरह से पागल है। जब फोन लैंडस्केप मोड में घुमाया जाता है, तो यह 320 की स्क्रीन अलर्ट को अलर्ट करता है, और जब फोन को पोर्ट्रेट मोड में घुमाया जाता है, तो इससे स्क्रीन की स्क्रीनिंग 569 हो जाती है। कैसे??

— इगोरगानापोलस्की जूल

बस स्पष्ट करने के लिए: आईओएस पर काम करने वाले समाधान की तलाश करने वालों को दो-बिट-मूर्ख या मेरे उत्तर को देखना चाहिए।

— mklement0

आईओएस के लिए दो-बिट-मूर्ख की हैक का उपयोग करने की आवश्यकता नहीं है। बस एंड्रॉइड पर स्क्रीन.वॉइस और स्क्रीन.हाइट का उपयोग करें और आईओएस पर window.innerWidth और window.innerHeight का उपयोग करें।

— जस्टिन

Answer 2

विभिन्न उपकरणों में वास्तविक व्यवहार असंगत है । अलग आवृत्ति के साथ एक अलग क्रम में आग और आकार बदलने की अभिविन्यास कर सकते हैं। इसके अलावा, कुछ मान (जैसे कि स्क्रीन.आवंटन और window.orientation) हमेशा आपकी अपेक्षा के अनुसार नहीं बदलते हैं। स्क्रीन से बचें । आईओएस में घुमाते समय यह नहीं बदलता है।

विश्वसनीय दृष्टिकोण दोनों आकार और अभिविन्यास को बदलने के लिए सुनना है (एक सुरक्षा पकड़ के रूप में कुछ मतदान के साथ), और आप अंततः अभिविन्यास के लिए एक वैध मूल्य प्राप्त करेंगे। मेरे परीक्षण में, एंड्रॉइड डिवाइस कभी-कभी पूर्ण 180 डिग्री घूमने पर घटनाओं को आग लगाने में विफल होते हैं, इसलिए मैंने अभिविन्यास को प्रदूषित करने के लिए एक सेटइंटरवल भी शामिल किया है।

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

यहां उन चार उपकरणों के परिणाम हैं जिन्हें मैंने परीक्षण किया है (ASCII तालिका के लिए खेद है, लेकिन यह परिणाम पेश करने का सबसे आसान तरीका था)। आईओएस उपकरणों के बीच निरंतरता के अलावा, उपकरणों में बहुत विविधता है। नोट: ईवेंट को उस क्रम में सूचीबद्ध किया गया है जिसे उन्होंने निकाल दिया था।

| ================================================= ============================= |
| डिवाइस | घटनाएँ निकाल दी | अभिविन्यास | इनरव्हीड | स्क्रीन
| ================================================= ============================= |
| 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 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Droid फोन | अभिविन्यास 90 | 320 | 320 |
| (परिदृश्य के लिए) | आकार परिवर्तन | 90 | 569 | 569 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Droid फोन | अभिविन्यास 0 | 569 | 569 |
| (चित्र के लिए) | आकार परिवर्तन | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| सैमसंग गैलेक्सी | अभिविन्यास 0 | 400 | 400 |
| गोली | अभिविन्यास 90 | 400 | 400 |
| (परिदृश्य के लिए) | अभिविन्यास 90 | 400 | 400 |
| | आकार परिवर्तन | 90 | 683 | 683 |
| | अभिविन्यास 90 | 683 | 683 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| सैमसंग गैलेक्सी | अभिविन्यास 90 | 683 | 683 |
| गोली | अभिविन्यास 0 | 683 | 683 |
| (चित्र के लिए) | अभिविन्यास 0 | 683 | 683 |
| | आकार परिवर्तन | 0 | 400 | 400 |
| | अभिविन्यास 0 | 400 | 400 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |

Comments

IOS5 एमुलेटर में, यदि आप लैंडस्केप में रिफ्रेश करते हैं तो घुमाएं, यह कोड फायर नहीं करता है।

— काम किया

बहुत बढ़िया जवाब। previousOrientationतत्कालीन वर्तमान अभिविन्यास के साथ आरंभ किया जाना चाहिए: var previousOrientation = window.orientation;यदि आप 180-डिग्री घुमाव को अनदेखा करना चाहते हैं, अर्थात, आपको बाएं या दाएं परिदृश्य और उल्टा-डाउन-या-नहीं वेरिएंट के बीच अंतर करने की आवश्यकता नहीं है, तो निम्न जोड़ें पहली पंक्ति के रूप में checkOrientation(): if (0 === (previousOrientation + window.orientation) % 180) return;हालाँकि, अतिरिक्त setTimeoutप्रवंचना के बिना , आपको केवल iOS पर इससे लाभ होगा, जहाँ एक स्विफ्ट 180-डिग्री घुमाव केवल एक orientationchange ईवेंट बनाता है ।

— mklement0

धन्यवाद @mklement, मैंने पिछलेOrientation को प्रारंभ करने के लिए कोड को ट्विक किया।

— दो-बिट-मूर्ख

महान जानकारी के लिए चीयर्स। यह मेरा सिर कर रहा था क्योंकि विंडोज फोन 8.1 में कॉर्डोवा का उपयोग करते समय एक आकार बदलने या ओरिएंटचेंज इवेंट की सुविधा नहीं है। असफल होने के कारण सेट इन्टरवल का उपयोग करने के लिए रिज़ॉर्ट किया गया।

— पूर्णता

@ mklement0 आज तक window.orientation विंडोज़ फोन 8.1 पर हमेशा अपरिभाषित रहेगा।

— पूर्णता

Answer 3

दो-बिट-मूर्ख का उत्कृष्ट उत्तर सभी पृष्ठभूमि प्रदान करता है, लेकिन मुझे आइओएस और एंड्रॉइड में अभिविन्यास परिवर्तनों को संभालने के तरीके के संक्षिप्त, व्यावहारिक सारांश का प्रयास करने दें :

• यदि आप केवल खिड़की के आयामों (विशिष्ट परिदृश्य) की परवाह करते हैं - और विशिष्ट अभिविन्यास के बारे में नहीं:
  • resizeघटना को ही संभालें ।
  • अपने हैंडलर में, केवल window.innerWidthऔर window.InnerHeightकेवल कार्य करें ।
  • उपयोग न करें window.orientation- यह iOS पर चालू नहीं होगा।

• यदि आप विशिष्ट अभिविन्यास के बारे में ध्यान रखते हैं :
  • संभाल केवलresize Android पर घटना है, और केवलorientationchange iOS पर घटना।
  • अपने हैंडलर में, window.orientation( window.innerWidthऔर window.InnerHeight) पर कार्य करें

ये दृष्टिकोण पिछले अभिविन्यास को याद करने और तुलना करने पर मामूली लाभ प्रदान करते हैं:

• आयाम-केवल दृष्टिकोण डेस्कटॉप ब्राउज़रों पर विकसित होने के दौरान भी काम करता है जो अन्यथा मोबाइल उपकरणों को अनुकरण कर सकते हैं, उदाहरण के लिए, क्रोम 23। ( window.orientationयह ब्राउज़र पर उपलब्ध नहीं है)।
• वैश्विक / अनाम-फ़ाइल-स्तर-फ़ंक्शन-आवरण-स्तर चर की कोई आवश्यकता नहीं है।

Comments

समस्या यह है कि जब आकार या अभिविन्यास ईवेंट विंडो को आग लगाता है। Wner गलत और Droid उपकरणों की रिपोर्ट करता है

— albanx

@albanx जो अभी भी आईओएस पर क्रोम में एक समस्या है: / सफारी ठीक

— ठाक है

Answer 4

आप हमेशा खिड़की के आकार की घटना सुन सकते हैं। अगर, उस घटना पर, खिड़की लम्बी होने से चली गई, तो वह जितनी लंबी है, उससे अधिक चौड़ी है (या इसके विपरीत), आपको पूरा यकीन है कि फोन ओरिएंटेशन बस बदल गया था।

Comments

यह एक अच्छा विचार है, मैं कोशिश करूंगा कि (और अपने दोस्त से एंड्रॉइड फोन के साथ परीक्षण करने के लिए

— कहूं

मैंने अभी महसूस किया है कि यह विधि मुझे फोन का उन्मुखीकरण नहीं देती है। मुझे पता चल जाएगा कि यह चित्र या परिदृश्य है, लेकिन यह नहीं कि यह उल्टा है या बाईं ओर या दाईं ओर मुड़ गया है। आगे कोई विचार?

— दर्शन

मुझे यकीन नहीं है कि यह संभवतः कैसे हो सकता है ... आपको यह जानने की आवश्यकता क्यों है कि क्या फोन उल्टा है? फ़ोन के ब्राउज़र में एक शीर्ष है, और वेब पेज ब्राउज़र के शीर्ष पर उन्मुख होगा। दो मस्तिष्क कोशिकाओं वाला कोई भी उपयोगकर्ता एक साथ रगड़ने के लिए जो एक वेब पेज को उल्टा देख रहा है, बस अपने फोन को इधर-उधर कर देगा यदि वे इसे राइट-साइड-अप देखना चाहते हैं

— जोएल म्यूएलर

वह थोड़ा कठोर है। मुझे यह जानने में दिलचस्पी है कि मैं स्क्रीन के उन्मुखीकरण के आधार पर अलग-अलग सामग्री दिखा सकता हूं, यह 4 विभिन्न पृष्ठों तक हो सकता है, जिससे ब्राउज़र को यह जानने की आवश्यकता होती है कि क्या इसे 0, 90, 180 और 270 डिग्री तक घुमाया गया था। यह सब संभव है, आईफोन पर जावास्क्रिप्ट में, और इसलिए मैं पूछ रहा हूं।

— १

मुझे अभी भी एक कठिन समय आ रहा है जो यह बताता है कि एक वेब पेज उपयोगी रूप से अलग-अलग तरीके से काम कर सकता है, जब यह जिस डिवाइस पर प्रदान किया जाता है वह 270 डिग्री घुमाया जाता है, लेकिन अगर आप कहते हैं कि आपको एक वैध उपयोग-मामला मिला है, तो मैं वक्रोक्ति नहीं करूंगा। उस स्थिति में: मुझे क्षमा करें, लेकिन मुझे नहीं पता कि एंड्रॉइड ब्राउज़र इस स्तर का विवरण प्रदान करता है या नहीं।

— जोएल म्यूएलर

Answer 5

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

यह भी डेस्कटॉप ब्राउज़रों का समर्थन करता है, लेकिन यह हमेशा समान मूल्य लौटाएगा।

Comments

यह घटना मोशन सेंसर तक पहुंच के लिए वास्तव में अधिक है, हालांकि मुझे लगता है कि इसका उपयोग अभिविन्यास परिवर्तन का पता लगाने के लिए भी किया जा सकता है।

— रेने

मेरे Android गैलेक्सी S2 पर यह स्टॉक ब्राउज़र और न ही डॉल्फिन ब्राउज़र पर समर्थित है। लेकिन मोबाइल फ़ायरफ़ॉक्स के साथ अच्छी तरह से काम करता है।

— एडुआर्डो

Answer 6

मुझे भी यही समस्या थी। मैं Adroid उपकरणों के लिए Phonegap और Jquery मोबाइल का उपयोग कर रहा हूं। ठीक से आकार देने के लिए मुझे एक टाइमआउट सेट करना पड़ा:

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

Answer 7

यहाँ समाधान है:

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

Comments

यह वह समाधान है जो मेरे लिए सबसे अच्छा काम करता है, मुझे पता है कि यह 100% सटीक नहीं है, लेकिन आप इसका उपयोग करके क्षैतिज बनाम ऊर्ध्वाधर का पता लगा सकते हैं: var screenWidth = $ (window)। उपलब्धता (); var स्क्रीनहाइट = $ (विंडो) .height (); अगर (स्क्रीनवार्ड> स्क्रीनहाइट) {doSomething (); }

— math0ne सेप

यह एक भद्दा एंड्रॉइड टैबलेट पर मेरे लिए समाधान था। window.onresize, attachevent और addeventlistener कई ईवेंट (रिसाइज़, ऑन्सराइज़, ओरिएंटचेंज, डिवाइसरिएशन) पर विफल रहा। केवल Jquery $ (विंडो) .on () ने काम किया।

— लीगो

Answer 8

एक अन्य गोचा - कुछ एंड्रॉइड टैबलेट (मेरा मानना ​​है कि मोटोरोला एक्सओएम एक लो-एंड एलोनेक्स एक है जिसका मैं कुछ परीक्षण कर रहा हूं, शायद अन्य भी) ने अपने एक्सीलेरोमीटर को स्थापित किया है ताकि LANDSCAPE मोड में window.orientation == 0, चित्र न हो !

Answer 9

आप सभी ब्राउज़र के साथ संगत समाधान की कोशिश कर सकते हैं।

निम्नलिखित orientationchangeसंगतता तस्वीर है: इसलिए, मैं एक orientaionchangeपॉलीफ़िल लेखक हूं , यह अभिविन्यास- परिवर्तन उपयोगिता पुस्तकालय को ठीक करने के लिए @media विशेषता पर आधारित है- - ओरिएंटचेंज -फिक्स

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

Answer 10

वर्थ नोटिंग कि मेरे एपिक 4 जी टच पर मुझे किसी भी जावास्क्रिप्ट एंड्रॉइड कॉल पर काम करने से पहले वेबक्रोमक्लाइंट का उपयोग करने के लिए वेबव्यू सेट करना था।

webView.setWebChromeClient(new WebChromeClient());

Answer 11

क्रॉस ब्राउज़र तरीका

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

Answer 12

दो-मूर्ख के उत्तर में थोड़ा योगदान:

के रूप में droid फोन पर मेज पर वर्णित "ओरिएंटचेंज" घटना "आकार" घटना से पहले निकाल दिया जाता है, इस प्रकार अगले आकार को कॉल (यदि कथन के कारण) को अवरुद्ध करता है। चौड़ाई संपत्ति अभी भी सेट नहीं है।

वर्कअराउंड हालांकि शायद एक संपूर्ण नहीं है, लेकिन "ओरिएंटचेंज" इवेंट को फायर नहीं किया जा सकता है। "ओरिएंटचेंज" ईवेंट बाइंडिंग को "यदि" स्टेटमेंट में लपेटकर संग्रहीत किया जा सकता है:

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

आशा करता हूँ की ये काम करेगा

(परीक्षण नेक्सस एस पर किए गए थे)