आईओएस

Question

पर ज़ूम करने के लिए चुटकी का पता लगा रहा है। मैं आईओएस (और एंड्रॉइड वास्तव में) पर ज़ूम ईवेंट करने के लिए चुटकी का पता लगाने की कोशिश कर रहा हूं क्योंकि मैं एक निश्चित शीर्षलेख वाले पृष्ठों को दिखाने के लिए jQuery मोबाइल का उपयोग कर रहा हूं। एक सपनों की दुनिया में जो मैं चाहता हूं वह हैडर के लिए ज़ूम नहीं करना है, लेकिन शेष पृष्ठ के लिए ऐसा करना है। लेकिन मुझे पता है कि यह संभव नहीं है।

अधिकांश पृष्ठों पर मेरे पास एक मोबाइल संस्करण है जो स्वयं को ज़ूमिंग को अनिवार्य रूप से ज़ूम करने का आकार बदलता है, लेकिन 'फ्रंट कवर' पर क्लाइंट चाहता है कि उपयोगकर्ता निश्चित पृष्ठ (फिट करने के लिए संक्षिप्त) को देखने में सक्षम हो हेडर काफी उपयोगी है (यानी मोबाइल अनुकूलित पृष्ठों पर समान आकार के समान आकार) और केवल कवर छवि पर ज़ूम इन करने में सक्षम होने के लिए- हेडर बार छोड़कर जहां यह एक ही आकार में है।

समस्या यह है कि उपयोगकर्ता एक बार ज़ूम इन करने के लिए चुने जाने पर, यह हेडर बार अनिवार्य रूप से बड़ा हो जाता है।

तो मैं जो करना चाहता हूं वह वर्तमान चुने हुए ज़ूम स्तर का पता लगाता है और निश्चित हेडर बार को स्केल करता है, इसलिए यह अंतर्निहित पृष्ठ होने पर एक ही आकार (आसपास के फ़ोन इंटरफ़ेस के सापेक्ष) दिखता है ज़ूम इन।

मैं मूल रूप से उन छवियों के साथ ऐसा कर सकता हूं जो 100% चौड़ाई div फिट बैठते हैं, लेकिन मुझे ज़ूम के बाद छोड़े गए वास्तविक दृश्य क्षेत्र को रीफिट करने के लिए उस div की आवश्यकता है, और केंद्र को खींचें।

मैं भी jQuery मोबाइल संक्रमण का हिस्सा बनाना चाहता हूं, ज़ूम को 1: 1 पर एनिमेट करना चाहता हूं, इसलिए निम्न मोबाइल पेज जो 'मोबाइल फ्रेंडली' हैं, ज़ूम इन नहीं हैं, क्योंकि उन्हें होने की आवश्यकता नहीं है।

तो क्या किसी को भी कोई विचार है जहां से शुरू करना है?

Answer 1

आप अपने मुख्य पृष्ठ के बॉडी/कंटेनर को एक ईवेंट संलग्न कर सकते हैं जो वर्तमान पैमाने के स्तर की रिपोर्ट करेगा। उदाहरण के लिए, jQuery का उपयोग कर:

$(container).bind("gesturechange", function(event) { 

     var scale = event.originalEvent.scale; 

     ...do some logic for header here. 
    }); 

आप "event.preventDefault" का उपयोग नहीं करते हैं, तो पूरे पृष्ठ सही ढंग से स्क्रॉल करना चाहिए, और शीर्ष लेख अपने तर्क के अनुसार स्वयं ठीक हो जाना चाहिए। आप "जेस्चरस्टार्ट" और "जेस्चरेंड" घटनाओं से जुड़ना भी चाह सकते हैं।

अतिरिक्त पठन/स्पष्टीकरण: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 2

"एक सपनों की दुनिया में मैं अपनी पसंद का हैडर ज़ूम नहीं करने के लिए लेकिन पेज के आराम के लिए ऐसा करने के लिए है।"

आप gesturechange ईवेंट के भीतर header.style.WebkitTransform = 'scale(' + zoomvalue + '); को ज़ूम स्तर "पूर्ववत" करने के लिए सेट कर सकते हैं (एक गैर-ज़ूमिंग हेडर अनुकरण करें)।

अपने हेडर को एक निश्चित चौड़ाई बनाएं, और उस चौड़ाई और विंडो के बीच अनुपात में ज़ूम लागू करें। विजेताविड्थ।

AFAIK वास्तविक ज़ूम स्तर का पता लगाने का कोई तरीका नहीं है, क्योंकि यह device-independent-pixel (डीआईपी) पर तार्किक-पिक्सेल अनुपात पर निर्भर करता है, और AFAIK जावास्क्रिप्ट से यह पता लगाने का कोई तरीका नहीं है।