यह पिछले उत्तर पर फैलता है। सबसे अच्छा समाधान जो मैंने पाया है वह एक सहज सीएसएस विशेषता बनाने के लिए है जो केवल तब प्रकट होता है जब एक CSS3 मीडिया क्वेरी से मुलाकात की जाती है, और फिर उस विशेषता के लिए जेएस परीक्षण होता है।
उदाहरण के लिए, सीएसएस में आपके पास होगा:
@media screen only and (orientation:landscape)
{
// Some innocuous rule here
body
{
background-color: #fffffe;
}
}
@media screen only and (orientation:portrait)
{
// Some innocuous rule here
body
{
background-color: #fffeff;
}
}
फिर आप जावास्क्रिप्ट पर जाएं (मैं मजाक के लिए jQuery का उपयोग कर रहा हूं)। रंग घोषणाएं अजीब हो सकती हैं, इसलिए आप कुछ और उपयोग करना चाह सकते हैं, लेकिन यह सबसे मूर्खतापूर्ण तरीका है जिसे मैंने इसे जांचने के लिए पाया है। तब आप स्विचिंग को चुनने के लिए रिसाइज़ इवेंट का उपयोग कर सकते हैं। इसे सभी के लिए एक साथ रखें:
function detectOrientation(){
// Referencing the CSS rules here.
// Change your attributes and values to match what you have set up.
var bodyColor = $("body").css("background-color");
if (bodyColor == "#fffffe") {
return "landscape";
} else
if (bodyColor == "#fffeff") {
return "portrait";
}
}
$(document).ready(function(){
var orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
$(document).resize(function(){
orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
});
});
इसका सबसे अच्छा हिस्सा यह है कि मेरे इस उत्तर को लिखने के रूप में, यह डेस्कटॉप इंटरफेस पर कोई प्रभाव नहीं डालता है, क्योंकि वे (आम तौर पर) पृष्ठ के उन्मुखीकरण के लिए कोई तर्क नहीं देते (प्रतीत होते हैं)।