क्या जावास्क्रिप्ट का उपयोग करके व्यूपोर्ट चौड़ाई के विपरीत, उपयोगकर्ताओं के डिवाइस की चौड़ाई प्राप्त करने का एक तरीका है?
सीएसएस मीडिया क्वेरीज़ की पेशकश करता है, जैसा कि मैं कह सकता हूं
@media screen and (max-width:640px) {
/* ... */
}
तथा
@media screen and (max-device-width:960px) {
/* ... */
}
यह उपयोगी है अगर मैं लैंडस्केप ओरिएंटेशन में स्मार्टफ़ोन को लक्षित कर रहा हूँ। उदाहरण के लिए, iOS पर max-width:640px
भी iPhone पर परिदृश्य और पोर्ट्रेट मोड दोनों को लक्षित करने की घोषणा की जाएगी। यह एंड्रॉइड के लिए ऐसा नहीं है, जहां तक मैं बता सकता हूं, इसलिए इस उदाहरण में डिवाइस-चौड़ाई का उपयोग करते हुए सफलतापूर्वक दोनों झुकावों को लक्षित करता है, डेस्कटॉप उपकरणों को लक्षित किए बिना।
हालाँकि , अगर मैं डिवाइस चौड़ाई के आधार पर एक जावास्क्रिप्ट बाइंडिंग को लागू कर रहा हूं, तो मैं व्यूपोर्ट चौड़ाई के परीक्षण तक सीमित प्रतीत होता हूं, जिसका अर्थ निम्न के रूप में एक अतिरिक्त परीक्षण है:
if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }
यह मेरे लिए सुरुचिपूर्ण नहीं लगता, यह देखते हुए कि डिवाइस की चौड़ाई सीएसएस के लिए उपलब्ध है।
Modernizr
क्या आप इसे "साफ और सामान्य तरीका" करने में मदद कर सकते हैं: stackoverflow.com/questions/25935686/… । पहली टिप्पणी के बारे में: आप अपने उपयोग के मामले में सबसे अच्छा काम करने के बारे में जानने के लिए "Modernizr बनाम <otherLib> मीडिया क्वेरी" को गूगल करना चाहते हैं