मोबाइल वेब ऐप (एंड्रॉइड ब्राउज़र/आईओएस-मोबाइल सफारी) पर लैंडस्केप/पोर्ट्रेट की टॉगलिंग को अक्षम करने के लिए कैसे करें

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

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

मैं दोनों 'orientationchange' और 'आकार' की घटनाओं और उन पर preventDefault और stopPropagation फोन करने के लिए सुन रहा है, जब निकला एक लैंडस्केप दृश्य फिट करने के लिए पेज का पुनर्गठन के किसी भी ब्राउज़र के व्यवहार को रोकने की कोशिश की। खैर, स्पष्ट रूप से कुछ भी (आदर्श) को रोक रहा है।
```
window.addEventListener("orientationchange", function (e) { 
e.preventDefault(); 
e.stopPropagation(); 
}, false); 

window.addEventListener("resize", function (e) { 
e.preventDefault(); 
e.stopPropagation(); 
}, false); 
```

बिल्कुल कोई फर्क पड़ा। ब्राउज़र ने अभी भी एंड्रॉइड (दोनों pre2.1 और बाद में) और आईफोन 4-5 पर पृष्ठ को पुनर्गठित किया है।

, मेटा टैग की कोशिश की
```
<meta name="viewport" content="initial-scale=1.0, user-scalable=no /> 
```
तो नाराज हो गया
```
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> 
```
की कोशिश की न तो कोई फर्क पड़ा।
स्टैक ओवरफ्लो पर उग्र रूप से देखा, मैंने देखा कि मैंने चरण 1 में क्या किया था। कई बार बाहर निकला ... यह सुनिश्चित करने के लिए फिर से प्रयास किया कि मैं कुछ गड़बड़ नहीं कर रहा था। काम नहीं किया
मेरे गर्व में चूसा, फिर गर्व के कारण ईंट की दीवार में दौड़ने का फैसला किया, फिर वास्तव में मेरे गर्व में चूसा और यहां पोस्ट किया गया।

एचएएलपी।

स्रोत

2011-11-16 SPillai

मोबाइल उपकरणों स्केलिंग और ** उपयोगकर्ताओं **, नहीं डेवलपर्स के लिए रोटेशन प्रदान करते हैं। आप इसे क्यों हटाना चाहते हैं? – RobG

@RobG मुझे लगता है कि आप उलझन में हैं। – fancy

@RobG कर्ट होने के लिए खेद है, लेकिन यह बात नहीं है। – SPillai

-3

एंड्रॉइड जोड़ने: configChanges = "keyboardHidden | अभिविन्यास" आपके AndroidManifest.xml पर। यह सिस्टम को बताता है कि कॉन्फ़िगरेशन में परिवर्तन किस प्रकार आप स्वयं को संभालने जा रहे हैं - इस मामले में कुछ भी नहीं कर रहा है।

स्रोत

2011-11-16 03:27:54 sanraj

वेब ऐप, मूल ऐप नहीं। विशेष रूप से, एक जावास्क्रिप्ट समाधान होना चाहिए जिसे मैंने – SPillai

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

तुम भी उन्हें एक संदेश ("चित्र केवल मोड" जब वे क्षैतिज मोड में देखने का प्रयास)

स्रोत

2012-05-28 14:29:59 Hasanavi

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

<head> 
<style type="text/css"> 
#landscape{ 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     background: #000000; 
     width: 100%; 
     height: 100%; 
     display: none; 
     z-index: 20000; 
     opacity: 0.9; 
     margin:0 auto; 
} 
#landscape div{ 

     color: #FFFFFF;         
     opacity: 1; 
     top: 50%; 
     position: absolute; 
     text-align: center; 
     display: inline-block; 
     width: 100%; 
} 
</style> 
<script>   
     function doOnOrientationChange() 
     { 
     switch(window.orientation) 
     { 
      case -90:     
       document.getElementById("landscape").style.display="block"; 
       break; 
      case 90:    
       document.getElementById("landscape").style.display="block";     
       break; 
     default:     
       document.getElementById("landscape").style.display="none"; 
       break;        
     } 
     } 

     //Listen to orientation change 
     window.addEventListener('orientationchange', doOnOrientationChange); 

    </script> 
</head> 
<body onload="doOnOrientationChange();"> 
<div id="landscape"><div>"Rotate Device to Portrait"</div></div> 
</body>

स्रोत

2013-09-11 09:20:48 Anup

याद किया है, मुझे लगता है कि यह एक सुंदर सुरुचिपूर्ण समाधान है। बस मेरी राय :) –

window.orientation विश्वसनीय नहीं है। -90 डिग्री कुछ उपकरणों पर चित्र हो सकता है। अभिविन्यास 0 डिवाइस का _default_ अभिविन्यास है। – Pierre

स्पष्ट समाधान इस JavaScript का उपयोग करने के लिए है:

if(window.innerHeight > window.innerWidth){ 
    document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)"; 
}

जब स्क्रीन घूमता है, यह सही वापस बारी बारी से।

स्रोत

2014-05-06 21:16:14 invot

यह नहीं होना चाहिए 'अगर (window.innerHeight> window.innerWidth) { document.getElementsByTagName ("body") [0] .style.transform = "rotate (90deg)"; } ' –

क्या आप वाकई यह काम करते हैं? – Martian2049

@ कुनलडेटे फिक्स्ड। धन्यवाद! – invot

इसे छोटा और सरल रखें! :]

window.addEventListener('orientationchange', function() 
 
{ 
 
    if (window.innerHeight > window.innerWidth) 
 
    { 
 
     document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)"; 
 
    } 
 
});

स्रोत

2015-05-11 20:27:31 tfont

आपके पास एक छोटी सी बग है, दस्तावेज़ होना चाहिए .getElementsByTagName ('body') [0] .style.transform = "rotate (90deg)"; – JackKalish

आप सही हैं! धन्यवाद। कोड अपडेट किया गया है। – tfont

उत्तर

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