मोबाइल साइट अनुभव को बढ़ाना: लैंडस्केप ओरिएंटेशन को लागू करना और ऑटो-रोटेशन को अक्षम करना

मोबाइल प्रतिक्रिया के लिए डिज़ाइन करते समय, कुछ ओरिएंटेशन उपयोगकर्ता को महत्वपूर्ण रूप से प्रभावित कर सकते हैं अनुभव। यह प्रश्न एक मोबाइल वेबसाइट को लैंडस्केप ओरिएंटेशन तक सीमित करने और ऑटो-रोटेशन को अक्षम करने का समाधान ढूंढता है।

CSS Solution

इसे प्राप्त करने का एक तरीका सीएसएस मीडिया क्वेरीज़ के माध्यम से है। लैंडस्केप और पोर्ट्रेट ओरिएंटेशन के लिए अलग-अलग स्टाइलशीट बनाकर, आप यह नियंत्रित कर सकते हैं कि डिवाइस के ओरिएंटेशन के आधार पर साइट कैसे व्यवहार करती है। इसे लागू करने का तरीका यहां बताया गया है:

1. दो स्टाइलशीट बनाएं: लैंडस्केप के लिए style_l.css और पोर्ट्रेट के लिए style_p.css।
2. style_l.css में, प्रदर्शित होने वाली अपनी लैंडस्केप-विशिष्ट शैलियों को शामिल करें साइट की सामग्री पूरी चौड़ाई में।
3. style_p.css में, सभी तत्वों को छुपाएं और उपयोगकर्ताओं को निर्देश देने वाला एक संदेश प्रदर्शित करें इष्टतम दृश्य के लिए उनके डिवाइस को झुकाने के लिए।
4. मीडिया प्रश्नों का उपयोग करने के लिए अपने HTML हेड सेक्शन में निम्नलिखित कोड जोड़ें:

jQuery समाधान

jQuery का उपयोग डिवाइस ओरिएंटेशन का पता लगाने और तदनुसार साइट की कार्यक्षमता को बदलने के लिए भी किया जा सकता है। यहाँ एक उदाहरण है:

$(window).on("orientationchange", function() {
  if (window.orientation == 0 || window.orientation == 180) {
    // Landscape orientation
    // Enable landscape-specific features here
  } else if (window.orientation == 90 || window.orientation == -90) {
    // Portrait orientation
    // Show a message to rotate device
  }
});

दोनों समाधान प्रभावी ढंग से लैंडस्केप-ओनली ओरिएंटेशन को लागू करते हैं और मोबाइल साइट पर ऑटो-रोटेशन को अक्षम करते हैं, इच्छित ओरिएंटेशन में इष्टतम सामग्री प्रदर्शन सुनिश्चित करके उपयोगकर्ता के अनुभव को बढ़ाते हैं।