2012-01-21 13 views
6

मैं सेल फोन पर उपयोग के लिए अपने टैबलेट वेब ऐप को अनुकूलित करने की कोशिश कर रहा हूं। मीडिया क्वेरी कार्यक्षमता सही प्रतीत होती है और मेरा प्रारंभिक परीक्षण इसे बाहर करता है। मेरे पास सवाल यह है: फोन और टैबलेट के साथ जो पोर्ट्रेट से लैंडस्केप (डिवाइस के घूर्णन पर) से अपना अभिविन्यास बदलते हैं, तो अधिकतम-चौड़ाई क्या होती है?सीएसएस मीडिया क्वेरीज

दूसरे शब्दों में, बड़े एंड्रॉइड फोन में 480x800 की लाइनों के साथ संकल्प हैं, आईफोन 4 में 640x960 का संकल्प है, और मूल ब्लैकबेरी टॉर्च का 360x480 का संकल्प है। ये सभी संकल्प (डब्ल्यू एक्स एच) होते हैं जब डिवाइस पोर्ट्रेट मोड में होते हैं, इसलिए चौड़ाई 400, 640, और 360 क्रमशः होती है। हालांकि, जब आप डिवाइस को परिदृश्य में घुमाते हैं, तो ऊंचाई प्रदर्शन उद्देश्यों के लिए चौड़ाई बन जाती है। तो परिदृश्य में प्रभावी चौड़ाई क्रमश: 800, 960, और 480 बन जाती है, और 800 और 960 चौड़ाई टैबलेट परिदृश्य चौड़ाई के साथ ओवरलैप होती है जो प्रदर्शन को गड़बड़ कर देती है।

तो, चौड़ाई हमेशा चौड़ाई है? ऐसा कहने के लिए, जब डिवाइस इसके आयामों की रिपोर्ट करता है, तो चौड़ाई मान हमेशा सीएसएस उद्देश्यों के लिए समान रहता है, या जब डिवाइस परिदृश्य में घूमता है तो चौड़ाई मान बदलता है?

आपके लिए अग्रिम धन्यवाद।

+0

निश्चित रूप से यह बस को बदल देंगे जिस तरह से लोगों को एक पीसी पर अपने स्क्रीन संकल्प को बदल सकते हैं? –

उत्तर

6

डिवाइस फ़्लिप होने पर चौड़ाई मान बदल जाएगा, क्योंकि पृष्ठ की चौड़ाई भी बदल रही है।

आप क्वेरी करने के लिए डिवाइस लैंडस्केप या पोर्ट्रेट मोड में इस्तेमाल किया जा रहा है या नहीं चाहते हैं, तो आप के बजाय उन्मुखीकरण संपत्ति का उपयोग कर सकते हैं:

@media screen and (orientation: portrait) { 
} 

यह यदि ब्राउज़र विंडो की चौड़ाई से अधिक है की जाँच करेगा ऊंचाई (अभिविन्यास: परिदृश्य विपरीत करेगा)। सर्वोत्तम परिणामों के लिए, आपको शायद 'और' ऑपरेटर का उपयोग करके चेन परीक्षणों के लिए कई एमक्यू गुणों के संयोजन का उपयोग करने की आवश्यकता होगी। i.e .:

@media screen and (orientation: landscape) and (max-width: 960px) { 
} 

एमक्यू गुणों की एक पूरी सूची here उपलब्ध है।

+0

एक और बिंदु जो मदद कर सकता है - चौड़ाई वास्तव में ब्राउज़र विंडो की चौड़ाई है। डिवाइस-चौड़ाई डिवाइस की स्क्रीन की चौड़ाई है। डिवाइस फ़्लिप होने पर चौड़ाई और डिवाइस-चौड़ाई बदल जाएगी, लेकिन डिवाइस-चौड़ाई स्क्रीन की चौड़ाई की गणना करती है, जबकि चौड़ाई ब्राउज़र व्यूपोर्ट (स्क्रीन माइनस स्क्रॉलबार, या ब्राउज़र 'मेनू बार) के क्षेत्र की गणना करती है। – 1nfiniti

+0

उत्तर के लिए धन्यवाद, उन्होंने मदद की। –

2

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

@media (न्यूनतम-चौड़ाई: 700px) और (उन्मुखीकरण: परिदृश्य) {

}

मीडिया प्रश्नों के विस्तार को समझने के लिए

जाएँ: http://letsdopractice.com/css-media-queries/

-5

मीडिया क्वेरी शैली परिभाषित किया जाता है विभिन्न स्क्रीन आकार के लिए। मैं आपको मीडिया प्रश्नों के बारे में बहुत मूल बातें बताऊंगा। सीएसएस मीडिया क्वेरी की वाक्य रचना है:

@media not|only mediatype and (media feature) { 
CSS-Code; 
} 

मीडिया क्वेरी बारे में एक विस्तृत के लिए वाक्य रचना toturial कृपया देखें This Site

+2

यह प्रश्न का उत्तर नहीं है। – jcaron

+0

मैंने एक सामान्य उत्तर दिया। यह दूसरों के लिए सहायक हो सकता है। – Sajid

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