का पता लगाने के लिए एक विश्वसनीय मीडिया क्वेरी मैंने इस मुद्दे से संबंधित लगभग सभी स्टैक ओवरफ्लो प्रश्नों को पहले ही पढ़ लिया है, लेकिन मुझे उम्मीद है कि कुछ भी काम नहीं करता है।केवल आईपैड (या सर्वोत्तम 1024x768 मोबाइल डिवाइस पर)
यह मेरे लिए कहा गया था एक मीडिया क्वेरी के साथ केवल iPad डिवाइस (या कम से सबसे अच्छा ~ 1024x768 मोबाइल डिवाइस) का पता लगाने के। मैं लैपटॉप और डेस्कटॉप Win32/MacOS जब संकल्प 1024x768 (लेकिन नहीं फ़ायरफ़ॉक्स) पर सेट है पर
@media screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
...
}
उपयोग करने के लिए कोशिश की, लेकिन इस मीडिया क्वेरी भी क्रोम से मेल खाता है (और सफारी, मुझे लगता है)। मैंने इस मीडिया क्वेरी को orientation:portrait और orientation:landscape परिभाषित करने की कोशिश की लेकिन बिना किसी किस्मत के। यह डेस्कटॉप वेबकिट-ब्राउज़र पर भी पहचाना जाता है।
आप इस समस्या का परीक्षण करने के लिए this fiddle आज़मा सकते हैं।
खोज के बाद मैं, जिसमें
मुझे लगता है कि सफारी (और अन्य वेबकिट ब्राउज़रों मैं में परीक्षण किया है) कल्पना का पालन नहीं कर रहे हैं कहा गया है, फ़ायरफ़ॉक्स और ओपेरा रहे हैं, जबकि this interesting article लिए आया था।
'चौड़ाई' मीडिया सुविधा आउटपुट डिवाइस के लक्षित प्रदर्शन क्षेत्र की चौड़ाई का वर्णन करती है। निरंतर मीडिया के लिए, यह व्यूपोर्ट की चौड़ाई है (जैसा सीएसएस 2, सेक्शन 9.1.1 [सीएसएस 21] द्वारा वर्णित है) जिसमें एक रेंडर स्क्रॉल बार (यदि कोई है) के आकार शामिल हैं।
तो मैं के रूप में max-device-width (1024-15)
@media screen and (min-device-width: 768px)
and (max-device-width: 1009px) {
...
}
1009px के साथ इस (fiddle) की कोशिश की और
लेकिन काम नहीं करता है अगर मैं इस मीडिया क्वेरी भी उन्मुखीकरण को परिभाषित करने का उपयोग करें (fiddle)
@media screen and (device-width:768px) and (orientation:portrait),
screen and (device-width:1009px) and (orientation:landscape) {
...
}
(मेरे लिए) यह ऐसा लगता है कि ठीक से काम करता है और ऐसा लगता है कि यह केवल सफारी/आईपैड से मेल खाता है।
क्यू: क्या यह मीडिया क्वेरी मेरी ज़रूरत के लिए पर्याप्त विश्वसनीय है? क्या यह हमेशा आईपैड/आईपैड 2 में काम करता है? या मुझे कुछ अन्य उपकरणों के संकल्प के साथ कुछ किनारे के मामलों और अप्रत्याशित मैच की उम्मीद करनी है? ऐसे मामले में आप एक और अधिक कुशल और विश्वसनीय मीडिया क्वेरी का सुझाव दे सकते हैं?
आप :) (और खेद शब्दाडंबर के लिए) धन्यवाद
सही उद्देश्य क्या है? जैसे एक अलग स्क्रीन रिज़ॉल्यूशन के साथ अगले महीने या तो एक आईपैड 3 होगा। और हाँ - मैं उम्मीद करता हूं कि अन्य टैबलेट भी मिलें। – Lennart
सटीक उद्देश्य मुख्य रूप से आईपैड/आईपैड 2 से मेल खाता है। मुझे पता है कि आरडब्ल्यूडी के मामले में इसका कोई मतलब नहीं है (मोबाइल और डेस्कटॉप 1024x768 के बीच क्या अंतर है? उन्हें आईएमएचओ एक ही चीज़ माना जाना चाहिए) लेकिन जब से मुझे शुद्ध सीएसएस में ऐसा करने के लिए कहा गया, तो मैं चाहता हूं कि मैं इसे प्राप्त करें - यदि यह निश्चित रूप से संभव है। – fcalderan
क्या आप आईपैड के लिए साइट अनुकूल बनाने की कोशिश कर रहे हैं? यदि ऐसा है, तो आप सभी उपकरणों के लिए साइट 'टच' अनुकूल बनाने के बेहतर होंगे और उस स्थिति में यदि आप टच इवेंट्स का समर्थन करते हैं तो आप आधुनिकता के लिए आधुनिकता के पुस्तकालयों का उपयोग कर सकते हैं (ताकि आप स्विच कर सकें कि कौन सी सीएसएस फ़ाइल प्रदान की जाती है जावास्क्रिप्ट) – Skuld