मैं उत्तरदायी डिज़ाइन वाली वेबसाइट बनाने के लिए सीएसएस मीडिया प्रश्नों का उपयोग कर रहा हूं। जब मैं या तो परिदृश्य या पोर्ट्रेट अभिविन्यास में आईपैड पर अपना टेस्ट पेज खोलता हूं, तो यह ठीक दिखता है।पृष्ठ को बाईं ओर स्थानांतरित करता है जब परिदृश्य से आईपैड को पोर्ट्रेट से घूर्णन करता है

हालांकि, जब मैं परिदृश्य से पोर्ट्रेट मोड में स्विच करता हूं, तो पेज बाईं ओर स्थानांतरित हो जाता है। मैं बता सकता हूं कि सही सीएसएस लोड हो रहा है क्योंकि पेज पर अन्य चीजें बदलती हैं। मैं पेज को दाईं ओर भी खींच सकता हूं और ऐसा लगता है कि अगर मैंने शुरुआत में पोर्ट्रेट में पेज खोला था तो ऐसा लगता है।

मैं अपने व्यूपोर्ट में स्थापित किया है: मेटा आईडी = "दृश्य" नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0, कम से कम-स्केल = 1.0"

मैं जोड़ा आईओएस व्यूपोर्ट स्केलिंग बग को ठीक करने के लिए जावास्क्रिप्ट जो पोर्ट्रेट से परिदृश्य में स्विच करते समय पृष्ठ को ज़ूम करने के लिए उपयोग करता था। (मैंने यहां वर्णित समाधान का उपयोग किया: https://gist.github.com/901295)

मुझे लैंडस्केप से पोर्ट्रेट पर स्विच करते समय मुझे लगता है कि बग के लिए नाम ढूंढने में समस्याएं आ रही हैं। क्या किसी और ने इसे देखा है या कैसे ठीक किया जाए?

स्रोत

2011-10-13 Jessica White Ralston

पृष्ठ या सीएसएस पोस्ट करें ... –

प्रभावी रूप से एक डुप्लिकेट [अभिविन्यास परिवर्तन पर एक वेब पेज को पुन: प्रस्तुत करने का सबसे अच्छा तरीका क्या है?] (Http://stackoverflow.com/questions/7919172/what-is - सर्वोत्तम-विधि-का-पुन: प्रतिपादन-ए-वेब-पेज-ऑन-ओरिएंटेशन-चेंज) - वही अंतर्निहित। –

मैं अपने समान मुद्दे को हल करने में कामयाब रहा - शायद यह आपके लिए काम करेगा?

यदि आपको एक विशेष div या अन्य तत्व है जो अलग-अलग बिट्स को हटाने/पुनर्स्थापित करने और पृष्ठ को रीस्टस्टिंग करके उत्पन्न करने के लिए आपको काम करना होगा। एक बार जब आप इसे काम कर लेंगे तो अपने सीएसएस में उस तत्व के लिए overflow: hidden संपत्ति जोड़ने का प्रयास करें - मैंने overflow-x: hidden का उपयोग किया क्योंकि मेरा मुद्दा क्षैतिज स्क्रॉलिंग था लेकिन आपको इसे बदलने की आवश्यकता हो सकती है।

आशा है कि यह उपयोग की है ... शुभकामनाएँ!

स्रोत

2011-11-29 02:22:53 ellawson

-2

कोशिश अपनी सामग्री गुण में निम्नलिखित सेटिंग जोड़ने: maximum-scale=1

या कोशिश यह: user-scalable=no

here is the ios documentation

स्रोत

2011-12-05 11:57:27 andrej

यह काम नहीं करता है। [मेरा जवाब] देखें (http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change/31357325#31357325) एक डेमो के लिए। –

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

मैं ने वही समस्या थी और निम्न JavaScript वैकल्पिक हल के साथ इसे हल:

// ... 
// Optionally add a conditional here to check whether we are in Mobile Safari. 
// ... 
window.addEventListener('orientationchange', function() { 
    if (window.orientation == 0 || window.orientation == 180) { 
     // Reset scroll position if in portrait mode. 
     window.scrollTo(0, 0); 
    } 
}, false);

हो सकता है कि यह दूसरों के लिए भी काम करेगा।

स्रोत

2012-08-07 14:24:28 Jeroen

जेरेसन, आपकी जावास्क्रिप्ट मेरे लिए काम करती है। मेरा व्यूपोर्ट है:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,   minimum-scale=1, user-scalable=no" />

मैं ड्रूपल कॉर्पोरेट स्वच्छ उत्तरदायी थीम का उपयोग कर रहा हूं। मुझे ओमेगा उत्तरदायी थीम ढांचे का उपयोग करके यह समस्या नहीं आई है।

स्रोत

2012-12-12 23:56:43

इस के लिए समाधान के रूप में द्वारा @ellawson

समस्या का प्रस्ताव है कुछ तत्व ब्राउज़र द्वारा सही ढंग से बढ़ाया नहीं जा रहा है जब डिवाइस घूर्णन के कारण होता है। उस तत्व को ढूंढें और ओवरफ्लो लागू करें: छुपाएं; या overflow-x: hidden; जैसा कि वह कहता है।

स्रोत

2013-06-26 11:26:00 Grantzau

-1

मैं इस समस्या को एक आईपैड के साथ आया और html { overflow-x:hidden; } लागू किया। ऐसा लगता है कि इस मुद्दे को हल किया गया है।

स्रोत

2014-08-08 20:06:45 NinoLopezWeb

नोट: यह प्रश्न duplicate है। मैं यहां अपने उत्तर का सारांश पोस्ट करूंगा।

2015 अद्यतन

सभी अन्य उत्तर दुर्भाग्य से, गलत पुराना, या गुमराह कर रहे हैं। यहाँ क्या काम करता है:

window.addEventListener('orientationchange', function() { 
 
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display'); 
 
    document.body.style.display='none'; 
 
    setTimeout(function() { 
 
     document.body.style.display = originalBodyStyle; 
 
    }, 10); 
 
    });

कोड orientationchange event को सुनता है और यह छुपा है और यह 10 मिलीसेकंड बाद में दिखा कर body तत्व की एक फिर से प्रवाह के लिए मजबूर किया। यह किसी भी <meta> टैग या मीडिया प्रश्नों पर निर्भर नहीं है।

तुमने कहा था,

जब मैं iPad पर अपने परीक्षण पृष्ठ को खोलने या तो परिदृश्य में या पोर्ट्रेट ओरिएंटेशन में, यह ठीक लग रहा है। हालांकि, जब मैं परिदृश्य से पोर्ट्रेट मोड में स्विच करता हूं, तो पृष्ठ को बाईं ओर

यह महत्वपूर्ण है। आपको बस body के पुन: पेंट को मजबूर करने की आवश्यकता है।

उत्तर जो <meta name="viewport" content="width=device-width, initial-scale=1.0"> या सफारी 7 के रूप में इसके बदलावों को जोड़ने का सुझाव देते हैं, अब और खराब नहीं हैं। यहां एक demo है। यह सुनिश्चित करने के लिए कि आप देखते हैं कि यह कैसे काम नहीं करता है, आईपैड के साथ लैंडस्केप मोड में शुरू करें, पृष्ठ लोड करें, फिर घुमाएं। ध्यान दें कि फ्लेक्सबॉक्स का उपयोग करने के बावजूद पेज पूरी ऊंचाई तक विस्तार नहीं करता है।

तुलना करें कि this page पर, जहां हम उत्पादन में छुपा/शो बॉडी तकनीक का उपयोग करते हैं।

स्रोत

2015-07-11 12:55:42

इसके लिए धन्यवाद। मुझे एक उत्तरदायी एचटीएमएल टेबल स्क्रिप्ट और accordion के साथ समस्या हो रही थी। इस स्क्रिप्ट ने इस मुद्दे को ठीक किया। +1 – Progrower

पृष्ठ को बाईं ओर स्थानांतरित करता है जब परिदृश्य से आईपैड को पोर्ट्रेट से घूर्णन करता है

उत्तर

2015 अद्यतन

संबंधित मुद्दे