मैं jQuery के साथ विंडो आकार का पता कैसे लगा सकता हूं?

Question

मैं jQuery की तरह jQuery के साथ विंडो/ब्राउज़र आकार का पता कैसे लगा सकता हूं? जीमेल में, जैसे ही हमने विंडो सेटिंग में विंडो रिज़ॉल्यूशन बदल दिया है, हमें वर्तमान पृष्ठ को रीफ्रेश या पुनः लोड करने की आवश्यकता नहीं है? मेरी प्रोजेक्ट में, जैसे ही विंडो सेटिंग बदल दी गई है, मुझे ब्राउज़र को रीफ्रेश करने की आवश्यकता है।

किसी भी विचार की सराहना की जाएगी।

Answer 1

आप:

$(window).height(); 
$(window).width(); 

सूचना पाने के लिए जब ब्राउज़र आकार दिया जाता है, इस बाँध कॉलबैक का उपयोग करें:

Answer 2

//get dimensions 
var height = $(window).height(); 
var width = $(window).width(); 

//refresh on resize 
$(window).resize(function() { 
    location.reload(true) 
}); 

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

Answer 3

क्या आप यह जानना चाहते हैं कि विंडो का आकार कब बदला गया है?

आप एक हैंडलर संलग्न करने के लिए JQuery के resize का उपयोग कर सकते हैं।

$(window).resize(function() { 
    // Do something 
}); 

Answer 4

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

$(window).resize(function() { 
    // This will execute whenever the window is resized 
    $(window).height(); // New height 
    $(window).width(); // New width 
}); 

आप ब्राउज़र में सीएसएस मीडिया क्वेरीज़ का भी उपयोग कर सकते हैं जो आपके पृष्ठ की शैली को विभिन्न डिस्प्ले चौड़ाई में अनुकूलित करने के लिए उनका समर्थन कर सकते हैं, लेकिन यदि आप उचित लचीला लेआउट चाहते हैं तो आपको वास्तव में em इकाइयों और प्रतिशत और min-width और max-width का उपयोग करना चाहिए। जीमेल शायद इन सभी के संयोजन का उपयोग करता है।

Answer 5

आप चौड़ाई की तुलना करने के लिए सादे जावास्क्रिप्ट window.innerWidth का भी उपयोग कर सकते हैं।

लेकिन उपयोग jQuery के .resize() आप के लिए स्वचालित रूप से निकाल दिया:

$(window).resize(function() { 
    // your code... 
}); 

http://api.jquery.com/resize/

Answer 6

आप पृष्ठ पर एक div कहीं बनाने के लिए और इस कोड डाल:

<div id="winSize"></div> 
<script> 
    var WindowsSize=function(){ 
     var h=$(window).height(), 
      w=$(window).width(); 
     $("#winSize").html("<p>Width: "+w+"<br>Height: "+h+"</p>"); 
    }; 
    $(document).ready(WindowsSize); 
    $(window).resize(WindowsSize); 
</script> 

यहाँ एक टुकड़ा है:

var WindowsSize=function(){ 
 
    \t var h=$(window).height(), 
 
    \t \t w=$(window).width(); 
 
    \t $("#winSize").html("<p>Width: "+w+"<br>Height:"+h+"</p>"); 
 
}; 
 
$(document).ready(WindowsSize); 
 
$(window).resize(WindowsSize);

#winSize{ 
 
    position:fixed; 
 
    bottom:1%; 
 
    right:1%; 
 
    border:rgba(0,0,0,0.8) 3px solid; 
 
    background:rgba(0,0,0,0.6); 
 
    padding:5px 10px; 
 
    color:#fff; 
 
    text-shadow:#000 1px 1px 1px,#000 -1px 1px 1px; 
 
    z-index:9999 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="winSize"></div>

बेशक, इसे अपनी आवश्यकताओं के अनुरूप अनुकूलित करें! ;)