वेब ऐप में आईफोन के लिए स्क्रीन-ओरिएंटेशन को नियंत्रित करने के लिए कैसे करें

Question

मेरे पास एक बहुत ही बुनियादी वेब पेज है जो canvas आधारित ग्राफ़ बनाने के लिए फ़्लोट का उपयोग करता है (जैसा कि एसओ प्रतिष्ठा ग्राफ के लिए उपयोग करता है)।

पीसी डिस्प्ले के मामले में, इसे सामान्य रूप से चौड़ाई (एक्स-अक्ष) 1.6 गुना ऊंचाई के साथ सामान्य रूप से आउटपुट करना चाहिए।

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

तो मेरी प्रश्न हैं:

1) वहाँ एक रास्ता (सीएसएस, जे एस, या बस एचटीएमएल सिर टैग) का उपयोग कैनवास है बारी बारी से एक चित्र अभिविन्यास का पता लगाने पर 90 डिग्री के है?

2) क्या सामान्य रूप से तत्वों/वस्तुओं को घुमाने के लिए कोई तरीका है, भले ही इसे कौन देख रहा हो?

3) क्या डिवाइस घुमाए जाने पर सामग्री को घूर्णन करने के आईफोन के डिफ़ॉल्ट व्यवहार से बचने का कोई तरीका है? जाहिर है, मैं चाहता हूं कि उपयोगकर्ता डिवाइस को घुमाए, यह देखते हुए कि यह किनारे पर दिखाया गया है, लेकिन मैं नहीं चाहता कि ग्राफ फ़्लिप हो जाए और जब भी वे फोन चालू करते हैं तब भी वे किनारे पर हों, फोन को फ्लिप करना जारी रखें और कभी नहीं अभी भी पकड़ने के लिए ग्राफ।

धन्यवाद!

Answer 1

ऐसा कुछ।

window.onorientationchange = function() { 

    var orientation = window.orientation; 
    switch(orientation) { 
    case 0: 

    document.body.setAttribute("class","portrait"); 

    break; 

    case 90: 

    document.body.setAttribute("class","landscapeLeft"); 

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right)."; 
    break; 

    case -90: 

    document.body.setAttribute("class","landscapeRight"); 

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left)."; 
    break; 
    } 
} 

Answer 2

1/2) क्या आपने -web-transform को आजमाया था? देखें इस Apple web page

3) मुझे लगता है कि आप ऑटो रोटेशन

Answer 3

एक अन्य विकल्प के लिए निम्न कोड के साथ अपने सीएसएस लक्षित करने के लिए है को बाधित नहीं कर सकते हैं:

/* Portrait */ 
@media screen and (max-width: 320px){ 
    /* Place your style definitions here */ 
} 

/* Landscape */ 
@media screen and (min-width: 321px){ 
    /* Place your style definitions here */ 
}