CSS मीडिया क्वेरी का उपयोग करके डिवाइस ओरिएंटेशन का पता कैसे लगाएं?

Question

जावास्क्रिप्ट में अभिविन्यास मोड का उपयोग करके पता लगाया जा सकता है:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

हालांकि, क्या केवल सीएसएस का उपयोग करके अभिविन्यास का पता लगाने का एक तरीका है?

उदाहरण के लिए। कुछ इस तरह:

@media only screen and (width > height) { ... }

Answer 1

सीएसएस स्क्रीन अभिविन्यास का पता लगाने के लिए:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

मीडिया क्वेरी की सीएसएस परिभाषा http://www.w3.org/TR/css3-mediaqueries/#orientation पर है

Comments

नोट: यह मान वास्तविक डिवाइस ओरिएंटेशन के अनुरूप नहीं है। पोर्ट्रेट ओरिएंटेशन में अधिकांश डिवाइसों पर सॉफ्ट कीबोर्ड खोलने से व्यूपोर्ट व्यापक हो जाएगा, क्योंकि यह ब्राउजर को पोर्ट्रेट के बजाय लैंडस्केप शैलियों का उपयोग करने के लिए प्रेरित करेगा।

— जोहान कोम्ब्रिंक

@JohannCombrink वास्तव में आपने इसका उल्लेख किया है। कीबोर्ड खोलने से डिजाइन गड़बड़ हो जाएगा। अच्छा आप इसे इंगित करें।

— लोटेकसून

@ जोहानकॉमब्रिंक की टिप्पणी के लिए संदर्भ: stackoverflow.com/q/8883163/363448

— ndequeker

कीबोर्ड के पॉप अप होने पर एक अलग शैली लागू करना कोई बुरी बात नहीं हो सकती है क्योंकि दृश्य क्षेत्र आम तौर पर उस शैली के लिए अधिक उपयुक्त होता है जो परिदृश्य मोड पर लागू होती है। तो एक bummer नहीं हो सकता है।

— मुहम्मद बिन युसरत

मुझे मुहम्मद की टिप्पणी पसंद है: यदि एक सॉफ्टवेयर कीबोर्ड एक व्यूपोर्ट को कम चौड़ा होने का कारण बनता है, तो व्यूपोर्ट इसलिए एक लैंडस्केप ओरिएंटेशन होगा (भले ही आप भौतिक डिवाइस को सामान्य रूप से पकड़े हुए हों)। सीएसएस मेरी राय में इरादा के अनुसार काम कर रहा है।

— बेनी

Answer 2

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

लेकिन यह अभी भी लगता है कि आपको प्रयोग करना है

Comments

ओरिएंटेशन डिवाइस पर निर्भर करता है। लैंडस्केप मोड में कुछ टैबलेट्स ओरिएंटेशन = 0 रिपोर्ट करते हैं। आईफ़ोन सैमसंग गैलेक्सी से अलग रिपोर्ट करते हैं।

— ब्लैक

Answer 3

मुझे लगता है कि हमें अधिक विशिष्ट मीडिया क्वेरी लिखने की आवश्यकता है। सुनिश्चित करें कि यदि आप एक मीडिया क्वेरी लिखते हैं तो यह अन्य दृश्य (Mob, Tab, Desk) पर प्रभाव नहीं डालनी चाहिए अन्यथा यह परेशानी हो सकती है। मैं संबंधित डिवाइस के लिए एक मूल मीडिया क्वेरी लिखने का सुझाव देना चाहता हूं जो दृश्य और एक अभिविन्यास मीडिया क्वेरी दोनों को कवर करता है जिसे आप अच्छे अभ्यास के लिए अभिविन्यास दृश्य के बारे में अधिक विशिष्ट कोड दे सकते हैं। हमें एक ही समय में मीडिया अभिविन्यास क्वेरी लिखने की आवश्यकता नहीं है। आप नीचे दिए गए उदाहरण का उल्लेख कर सकते हैं। मुझे खेद है अगर मेरा अंग्रेजी लेखन बहुत अच्छा नहीं है। उदाहरण के लिए:

मोबाइल के लिए

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

गोली के लिए

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

डेस्कटॉप

अपने डिजाइन की आवश्यकता के अनुसार आनंद लें ... (:

धन्यवाद, जीतू

Answer 4

मैं पहलू-अनुपात के लिए जाऊंगा, यह अधिक संभावनाएं प्रदान करता है।

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

दोनों, अभिविन्यास और पहलू-अनुपात व्यूपोर्ट के वास्तविक आकार पर निर्भर करते हैं और डिवाइस अभिविन्यास के साथ कुछ भी नहीं है।

और पढ़ें: https://dev.to/ananyaneogi/useful-css-media-query-features-off

Answer 5

जावास्क्रिप्ट में इसका उपयोग करना बेहतर है screen.widthऔर screen.height। ये दो मूल्य सभी आधुनिक ब्राउज़रों में उपलब्ध हैं। वे स्क्रीन के वास्तविक आयाम देते हैं, भले ही ऐप को आग लगने पर ब्राउज़र को छोटा कर दिया गया हो। window.innerWidthजब ब्राउज़र को छोटा किया जाता है तो परिवर्तन होता है, जो मोबाइल उपकरणों पर नहीं हो सकता है, लेकिन पीसी और लैपटॉप पर हो सकता है।

के मूल्यों screen.widthऔर screen.heightपरिवर्तन जब मोबाइल डिवाइस पोर्ट्रेट और लैंडस्केप मोड के बीच flips, तो यह मान की तुलना द्वारा मोड निर्धारित करने के लिए संभव है। यदि screen.width1280px से अधिक आप पीसी या लैपटॉप के साथ काम कर रहे हैं।

आप जावास्क्रिप्ट में एक ईवेंट श्रोता का निर्माण कर सकते हैं ताकि यह पता लगाया जा सके कि दोनों मान फ़्लिप किए गए हैं। परावर्तित करने के लिए पोर्ट्रेट स्क्रीन.आवेशन मान 320px (मुख्यतः iPhones), 360px (सबसे अन्य फोन), 768px (छोटी गोलियाँ) और 800px (नियमित गोलियाँ) हैं।

Comments

यह ध्यान रखना महत्वपूर्ण है कि जब iPhone घुमाया जाता है तो iOS screen.widthऔर screen.heightमूल्यों को फ्लिप नहीं करता है। यह हमेशा समान मूल्यों की रिपोर्ट करता है। आपको यह window.orientationनिर्धारित करने के लिए संपत्ति का उपयोग करना चाहिए कि क्या डिवाइस घुमाया गया था ... (परिदृश्य मोड के लिए मान 90 या -90 होगा।)

— इंटरडिस्ट