स्क्रीन रोटेशन के बाद स्क्रीन.विड्थ/स्क्रीन.हेइट अपडेट नहीं हो रहा है

Question

मुझे आईफोन डिवाइस (आईफोन 7, आईओएस 10, लेकिन अन्य आईफोन भी) पर इस समस्या का सामना करना पड़ रहा है: जावास्क्रिप्ट में, अगर मैं ओरिएंटेशन एक्सचेंज इवेंट को अंदर रखता हूं हैंडलर, स्क्रीन.विड्थ और स्क्रीन। हाइट वही रहता है (पहले घूर्णन के रूप में)।

के बाद से इस व्यूपोर्ट सेटिंग से निर्भर हो सकता है, यह कैसे मेरी व्यूपोर्ट .html फ़ाइल में घोषित किया जाता है:

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

सब कुछ Chrome की नकली दृश्य में ठीक काम करता है।

आपकी मदद के लिए अग्रिम धन्यवाद।

Answer 1

जहां तक ​​मुझे पता है कि स्क्रीन रोटेशन के बाद डिवाइस में चौड़ाई/ऊंचाई नहीं बदलेगी। + 90/-90

window.innerHeight/innerWidth 0 से यह मान परिवर्तन: यदि डिवाइस घुमाया जाता है आप इन गुणों

1. window.orientation पढ़ सकता है की जांच करने के इस मूल्यों लगा दिया जाता था
2. document.documentElement.clientHeight/clientWidth: यह मान

दुर्भाग्य से लगा दिया जाता था, इस व्यवहार सी नहीं है सभी एंड्रॉइड/आईओएस/विंडो उपकरणों पर जोरदार। मुझे लगता है कि this आंकड़ा सुंदर समझाया गया है।

Answer 2

आईओएस स्क्रीन के आकार को वापस करने के लिए प्रयुक्त होता था जैसे कि यह चित्र में था। उन्होंने इसे आईओएस 8 (मूल वर्गों पर) पर बदल दिया, लेकिन हो सकता है कि वे सफारी के लिए ऐसा करना भूल गए हों, या हो सकता है कि वे इसे संगतता के लिए इस तरह से रखें।

आप वास्तविक आकार रुचि के आधार पर आप उपयोग कर सकते window.innerWidth और window.innerHeight

मैं के साथ या व्यूपोर्ट के बिना एक ही मूल्यों को प्राप्त करना चाहते हैं

यह क्रोम नकली दृश्य पर ठीक काम करता है क्योंकि यह अनुरूपित विज़ुअलाइजेशन के स्क्रीन आकार को वापस करें, जैसा कि यह होना चाहिए, लेकिन यह ओएस को अनुकरण नहीं करता है जहां इसे डिवाइस के आधार पर चलाना चाहिए, इसलिए आपको वास्तविक डिवाइस के समान मूल्य नहीं मिलेगा (इस मामले में जिसमें असली डिवाइस अच्छा मूल्य नहीं लौटाता है)

Answer 3

jQuery मोबाइल में onOrienntetionChange ईवेंट है जो अभिविन्यास बदलने वाली घटना को संभालता है, और मैन्युअल रूप से अभिविन्यास बदलने के लिए $(window).orientationchange(); फ़ंक्शन है।

Answer 4

सीएसएस अभिविन्यास परिवर्तन का पता नहीं लगा सकता है।

अभिविन्यास परिवर्तन प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करें।

window.addEventListener("orientationchange", function() { 
    document.body.style.width = window.innerWidth; 
}); 

के रूप में कार्य करें यह जब उन्मुखीकरण बदल गया है एक event Handlerwindow में जोड़ने body की width बदलने के लिए होगा।orientationchange