जावास्क्रिप्ट/onorientationchange का उपयोग कर आईफोन पर सफारी के पैमाने/चौड़ाई/ज़ूम रीसेट करें

Question

मैं अलग-अलग सामग्री प्रदर्शित कर रहा हूं इस पर निर्भर करता है कि उपयोगकर्ता बॉडी टैग में ऑनरिएन्टेशन एक्सचेंज कॉल का उपयोग करके अपने फोन को कैसे पकड़ रहा है। यह बहुत अच्छा काम करता है - दूसरे दृश्य को बनाते समय मैं एक div छुपाता हूं।

पोर्ट्रेट मोड में div पहले लोड पर बहुत अच्छा लग रहा है। मैं इस का उपयोग सही पैमाने/ज़ूम पाने के लिए:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

पोर्ट्रेट मोड में सामग्री पर चलाने यहां तक ​​कि अगर, चौड़ाई सही है और उपयोगकर्ता के लिए नीचे स्क्रॉल कर सकते हैं। लैंडस्केप मोड में प्रदर्शन भी सही है। हालांकि, यदि लैंडस्केप मोड में सामग्री को उपयोगकर्ता को स्क्रॉल करने की आवश्यकता होती है, तो जब उपयोगकर्ता पोर्ट्रेट मोड पर वापस आ जाता है, तो स्क्रीन बोलने के लिए "ज़ूम आउट" होती है। यह होता है कि उपयोगकर्ता लैंडस्केप मोड में नीचे स्क्रॉल किया गया है या नहीं।

मैंने स्क्रीन के पैमाने/ज़ूम/चौड़ाई को सही करने की कोशिश करने के लिए कई अलग-अलग चीजों की कोशिश की है, लेकिन कोई भाग्य नहीं है। क्या इसे करने का कोई तरीका है?

अग्रिम धन्यवाद!

Answer 1

यहाँ क्या मैं अपने मीडिया-प्रश्नों पर ज़ूम से निपटने के लिए उपयोग करते हैं:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">

अधिकतम पैमाने वह चीज़ है जो इसे मेरे लिए बेचती है। इसका मतलब है कि किसी आईफोन पर पोर्ट्रेट से लैंडस्केप में संक्रमण वास्तव में कोई ज़ूम समस्या नहीं है ...

Answer 2

यदि आप सफारी में वेब-ऐप चला रहे हैं तो यह काम नहीं करेगा, लेकिन मुझे लगता है कि यह काम करेगा यदि आप अपने ऐप के अंदर UIWebView का उपयोग कर रहे हैं।

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

Answer 3

आप सामग्री विशेषता में user-scalable संपत्ति सेट कर सकते हैं। इस प्रयास करें:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;"> 

this answer से:

लेकिन आप उपयोगकर्ता के स्केलेबल आवंटित करता है, तो = कोई अपने साधन वेबसाइट ज़ूम इन या ज़ूम आउट करने की अनुमति नहीं।

Answer 4

मुझे यह समस्या भी थी, मुझे लगता है। अपने व्यूपोर्ट टैग में "अधिकतम-स्केल = 1.0" (और शायद आपको "मिन्यूम-स्केल = 1.0" डालने का प्रयास करें)। इसका मतलब यह है कि आप उपयोगकर्ता हालांकि सक्षम पैमाने होने के लिए नहीं करना चाहते हैं (जो मैं नहीं)

Answer 5

मुझे लैंडस्केप से पोर्ट्रेट में बदलते ज़ूम स्तरों के साथ कुछ समस्याएं थीं, जब सामग्री व्यूपोर्ट से बड़ी थी। "न्यूनतम-स्केल = 1.0" सेट करना, मेरे लिए यह हल किया गया।

Answer 6

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

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

Answer 7

इसके लिए मेटा टैग का उपयोग करना काम नहीं करता है। How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

कि पोस्ट पर: इस संबंधित सवाल के माध्यम से https://github.com/scottjehl/iOS-Orientationchange-Fix

: मैं मेटा टैग और orientationchange और gesturechange घटनाओं संभव के हर संयोजन की कोशिश की है, मैं समय समाप्ति और फैंसी जावास्क्रिप्ट के सभी प्रकार की कोशिश की, तो मैं इस पाया

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this); 

एक समाधान एक IIFE में अच्छी तरह से लिपटे ताकि आप नाम अंतरिक्ष मुद्दों के बारे में चिंता करने की ज़रूरत नहीं है यही कारण है कि:, एंड्रयू Ashbacher स्कॉट Jehl द्वारा लिखे कोड के लिए एक लिंक पोस्ट किया गया।

बस इसे अपनी स्क्रिप्ट में छोड़ दें (यदि आप jQuery का उपयोग कर रहे हैं तो document.ready() में नहीं) और व्हायोला!

यह सब devicemotion घटनाओं पर ज़ूम अक्षम करता है जो इंगित करता है कि orientationchange आसन्न है। यह मैंने देखा है सबसे अच्छा समाधान है क्योंकि यह वास्तव में काम करता है और ज़ूम अक्षम नहीं करता है।

संपादित करें: यह दृष्टिकोण हमेशा विश्वसनीय नहीं है, खासकर जब आप एक कोण पर आईपैड धारण कर रहे हैं। भी, मुझे नहीं लगता कि यह घटना जीन 1 आईपैड