मैं जावास्क्रिप्ट का उपयोग कर 'सीएसएस-पिक्सेल' (मीडिया-क्वेरी) चौड़ाई कैसे प्राप्त करूं?

Question

मुझे एहसास है कि डिवाइस आकार आदि प्राप्त करने से पहले इसी तरह के प्रश्न पूछे गए हैं लेकिन इस बारे में जाने के सही तरीके के बारे में असहमति प्रतीत होती है।

मान लीजिए मैं

अतिरिक्त छोटे उपकरणों फ़ोनों (< 768px)

छोटे उपकरणों टेबलेट (≥768px)

मध्यम उपकरणों के साथ मीडिया के प्रश्नों (जैसे ट्विटर बूटस्ट्रैप) है डेस्कटॉप (≥992 पीएक्स)

बड़े डिवाइस डेस्कटॉप (≥1200 पीएक्स)

अब, मैं जावास्क्रिप्ट का उपयोग अनिवार्य रूप से एक ही आउटपुट प्राप्त करने में सक्षम होना चाहता हूं। दूसरे शब्दों में, वास्तविक स्क्रीन बिंदुओं की बजाय सीएसएस मीडिया-क्वेरी पिक्सेल संख्या। यानी मुझे सही जवाब प्राप्त करने की आवश्यकता नहीं है, लेकिन मैं एक कारक या 2 या 3 से बाहर निकलने से बचना चाहता हूं क्योंकि मुझे सीएसएस पिक्सल की बजाय 'स्क्रीन डॉट्स' मिल रहा है।

मैं मोबाइल उपकरणों - विशेष रूप से एंड्रॉइड - डेस्कटॉप से ​​अधिक चिंतित हूं। screen.width इस के लिए विश्वसनीय है? या jQuery(document).width()?

(यह एक शोध परियोजना के लिए है और मुझे पता है कि टैबलेट बनाम फोन का पता लगाने के लिए मूल रूप से असंभव है, मुझे लगता है कि लोग उपयोग कर रहे उपकरणों के आकार का संकेत चाहते हैं। उपयोगकर्ता का अनुभव नहीं होगा परिणाम से तय)

Answer 1

ऐसा करने का मेरा पसंदीदा तरीका इस प्रकार है (jQuery):।

if (viewportWidth >= 768 && viewportWidth <= 991) { 
    //execute this 
} 

:

var viewportWidth = $(window).width(); 
// Then create if statements and execute code accordingly... 
if (viewportWidth <= 767) { 
      // execute code 
} else if (viewportWidth >= 768) { 
      // execute this 
} 

तुम भी इस तरह के रूप चौड़ाई, के बीच व्यूपोर्ट के लिए कोड निष्पादित कर सकते हैं 210

यह व्यूपोर्ट 768px और 991px के बीच कोड को निष्पादित करेगा ...

Answer 2

आप इस

var wid = window.innerWidth; 

अतिरिक्त छोटे उपकरणों फ़ोनों (< 768px)

if (wid < 767) { 
    //execute this 
} 

छोटे उपकरणों की तरह जावास्क्रिप्ट का उपयोग कर खिड़की चौड़ाई प्राप्त कर सकते हैं टेबलेट (≥768px)

if (wid >= 768 && wid <= 991) { 
    //execute this 
} 

मध्यम डिवाइस डेस्कटॉप (≥992 पीएक्स)

if (wid >= 992 && wid <= 1199) { 
    //execute this 
} 

बड़े उपकरणों डेस्कटॉप (≥1200px)

if (wid >= 1200) { 
    //execute this 
} 

Answer 3

यह स्क्रिप्ट मैं हमेशा उपयोग करते हैं:

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
} 

फिर आप एक चर करने के लिए यह कॉल कर सकते हैं, और इसकी ऊंचाई और चौड़ाई पढ़ गुण:

var vp = viewport(); 
var vpWidth = vp.width; 
var vpHeight = vp.height;