व्यूपोर्ट का आकार प्राप्त करने के लिए jQuery का उपयोग करना


308

ब्राउज़र व्यूपोर्ट के आकार को निर्धारित करने के लिए और पेज को आकार बदलने पर इसे फिर से सेट करने के लिए मैं jQuery का उपयोग कैसे करूं? मुझे इस स्थान में एक IFRAME आकार बनाने की आवश्यकता है (प्रत्येक मार्जिन पर थोड़ा सा)।

जो लोग नहीं जानते हैं, उनके लिए ब्राउज़र व्यूपोर्ट दस्तावेज़ / पृष्ठ का आकार नहीं है। यह स्क्रॉल से पहले आपकी विंडो का दृश्य आकार है।


कोई भी विचार कैसे उपकरणों स्क्रीन पर दिखाई देने वाले क्षेत्र को प्राप्त करने के लिए है, न कि यह क्या स्क्रॉल कर सकता है? मैं $ (विंडो) देखता हूं .height () डॉक्यूमेंट की पूरी चौड़ाई लौटाता है, न कि उस हिस्से को जिसे जूम किया जाता है। मैं जानना चाहता हूं कि जूम लगाने के बाद कितना दिखाई देता है।
फ्रैंक श्वाइटरमैन

appelsiini.net/projects/viewport यह करना चाहिए! :)
मैकेलिटो

1
यह सवाल का सीधा जवाब नहीं है, लेकिन उन लोगों के लिए आसान हो सकता है जो अपनी स्थिति और दृश्यता के सापेक्ष दृश्यता के अनुसार चयनकर्ताओं में हेरफेर करना चाहते हैं: appelsiini.net/projects/viewport (प्लगइन)
वालेस सिधारे

जवाबों:


484

व्यूपोर्ट की चौड़ाई और ऊंचाई पाने के लिए:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

पृष्ठ की घटना का आकार बदलें:

$(window).resize(function() {

});

18
मैंने विंडोज IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, ओपेरा 10.53 और सफारी 5.0 (7533.16) पर यह परीक्षण किया। यह इन सभी पर लगातार काम करता है। मैंने Ubuntu पर FF3.6.3 का भी परीक्षण किया और यह वहां भी काम करता है। मुझे लगता है कि मैं वर्डप्रेस 2.9.2 के साथ jQuery 1.3 का उपयोग कर रहा हूं, जहां मुझे काम करने के लिए इसकी आवश्यकता है।
वोलोमाइक

48
कोई भी विचार कैसे उपकरणों स्क्रीन पर दिखाई देने वाले क्षेत्र को प्राप्त करने के लिए है, न कि यह क्या स्क्रॉल कर सकता है? मैं $ (विंडो) देखता हूं .height () डॉक्यूमेंट की पूरी चौड़ाई लौटाता है, न कि उस हिस्से को जिसे जूम किया जाता है। मैं जानना चाहता हूं कि जूम लगाने के बाद कितना दिखाई देता है।
फ्रैंक श्वाइटरमैन

9
वास्तव में, innerWidth/ innerHeightउपयोग करने के लिए और अधिक सही (जूमिंग कवर) है।

18
@FrankSchwieterman शायद आपका ब्राउज़र उस तरीके का व्यवहार नहीं कर रहा है जो आप इसे चाहते हैं: हो सकता है कि आप इस समस्या में चल रहे हों: stackoverflow.com/q/12103208/923560 । सुनिश्चित करें कि आपकी HTML फ़ाइल में एक उचित DOCTYPEघोषणा शामिल है , जैसे <!DOCTYPE html>
अब्दुल

21
यह पूरी तरह से गलत है। यह आपको दस्तावेज़ का आकार देता है, न कि व्यूपोर्ट (दस्तावेज़ पर विंडो का आकार)।
माइक बेथानी


26

1. मुख्य प्रश्न का उत्तर

स्क्रिप्ट $(window).height()अच्छी तरह से काम करती है (व्यूपोर्ट की ऊँचाई दिखाती है और स्क्रॉलिंग ऊँचाई के साथ दस्तावेज़ नहीं), लेकिन क्या यह आवश्यक है कि आप अपने दस्तावेज़ में सही रूप से टैग टैग लगा दें, उदाहरण के लिए ये सिद्धांत:

HTML 5 के लिए:

<!DOCTYPE html>

संक्रमणकालीन HTML4 के लिए:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

संभवतः कुछ ब्राउज़रों द्वारा ग्रहण किया गया डिफ़ॉल्ट सिद्धांत ऐसा है, जो $(window).height()दस्तावेज़ की ऊंचाई लेता है न कि ब्राउज़र की ऊँचाई। Doctype विनिर्देशन के साथ, यह संतोषजनक रूप से हल हो गया है, और मुझे पूरा यकीन है कि आप पेप्स "बदलते स्क्रॉल-ओवरफ्लो को छिपाएंगे और फिर वापस" से बचेंगे, जो कि, मुझे क्षमा करें, थोड़ा गंदा चाल है, विशेषकर यदि आप डॉन ' टी इसे भविष्य के प्रोग्रामर के उपयोग के लिए कोड पर दस्तावेज़ करें।

2. एक अतिरिक्त टिप, एक तरफ ध्यान दें: इसके अलावा, यदि आप एक स्क्रिप्ट कर रहे हैं, तो आप अपने पुस्तकालयों का उपयोग करने में प्रोग्रामर की मदद करने के लिए परीक्षण का आविष्कार कर सकते हैं, मुझे एक जोड़े का आविष्कार करने दें:

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      } 

});


संपादित करें: भाग 2 के बारे में, "एक अतिरिक्त टिप, ध्यान दें": @ मचिअल, कल की टिप्पणी (2014-09-04) में, पूरी तरह से सही था: $ का चेक, गुड़ की तैयार घटना के अंदर नहीं हो सकता, क्योंकि जैसा कि उन्होंने बताया, यह मानते हुए कि $ पहले से ही परिभाषित है। इस बात को जानने के लिए धन्यवाद, और यदि आप इसे अपनी लिपियों में इस्तेमाल करते हैं, तो कृपया बाकी पाठकों को भी इसे सुधारने दें। मेरा सुझाव है: अपने पुस्तकालयों में एक "install_script ()" फंक्शन डालें जो लाइब्रेरी को इनिशियलाइज़ करता है (इस तरह के इनिट फंक्शन के अंदर $ का कोई भी संदर्भ रखें, जिसमें तैयार () की घोषणा भी शामिल है) और इस तरह के "install_script ()" फंक्शन की BEGINNING जांचें कि क्या $ परिभाषित किया गया है, लेकिन सब कुछ JQuery से स्वतंत्र करें, इसलिए जब JQuery अभी तक परिभाषित नहीं हुआ है, तो आपकी लाइब्रेरी "खुद का निदान" कर सकती है। मैं इस विधि को पसंद करता हूं बजाय एक JQuery के स्वत: निर्माण को CDN से लाने के लिए मजबूर करने के लिए। वे अन्य प्रोग्रामर की मदद करने के लिए एक तरफ छोटे नोट हैं। मुझे लगता है कि संभावित प्रोग्रामर की गलतियों की प्रतिक्रिया में लाइब्रेरी बनाने वाले लोग अधिक अमीर होंगे। उदाहरण के लिए, Google Apis को त्रुटि संदेशों को समझने के लिए एक अलग मैनुअल की आवश्यकता होती है। यह बेतुका है, कुछ छोटी गलतियों के लिए बाहरी प्रलेखन की आवश्यकता है जो आपको मैन्युअल या विनिर्देशन पर जाने और खोजने की आवश्यकता नहीं है। लाइब्रेरी को SELF-DOCUMENTED होना चाहिए। मैं उन गलतियों को ध्यान में रखते हुए कोड लिखता हूं जो अब से छह महीने बाद भी हो सकती हैं, और यह अभी भी एक साफ-सुथरा और दोहराव वाला कोड होने की कोशिश करता है, जो पहले से ही लिखित-से-रोकथाम-भविष्य-डेवलपर-गलतियाँ हैं। मुझे लगता है कि संभावित प्रोग्रामर की गलतियों की प्रतिक्रिया में लाइब्रेरी बनाने वाले लोग अधिक अमीर होंगे। उदाहरण के लिए, Google Apis को त्रुटि संदेशों को समझने के लिए एक अलग मैनुअल की आवश्यकता होती है। यह बेतुका है, कुछ छोटी गलतियों के लिए बाहरी प्रलेखन की आवश्यकता है जो आपको मैन्युअल या विनिर्देशन पर जाने और खोजने की आवश्यकता नहीं है। लाइब्रेरी को SELF-DOCUMENTED होना चाहिए। मैं उन गलतियों को ध्यान में रखते हुए कोड लिखता हूं, जो अब से छह महीने बाद भी हो सकती हैं, और यह अभी भी एक साफ-सुथरा और दोहराव वाला कोड होने की कोशिश करता है, जो पहले से ही लिखित-से-रोकने-भविष्य-डेवलपर-गलतियों के लिए है। मुझे लगता है कि संभावित प्रोग्रामर की गलतियों की प्रतिक्रिया में लाइब्रेरी बनाने वाले लोग अधिक अमीर होंगे। उदाहरण के लिए, Google Apis को त्रुटि संदेशों को समझने के लिए एक अलग मैनुअल की आवश्यकता होती है। यह बेतुका है, कुछ छोटी गलतियों के लिए बाहरी प्रलेखन की आवश्यकता है जो आपको मैन्युअल या विनिर्देशन पर जाने और खोजने की आवश्यकता नहीं है। लाइब्रेरी को SELF-DOCUMENTED होना चाहिए। मैं उन गलतियों को ध्यान में रखते हुए कोड लिखता हूं, जो अब से छह महीने बाद भी हो सकती हैं, और यह अभी भी एक साफ-सुथरा और दोहराव वाला कोड होने की कोशिश करता है, जो पहले से ही लिखित-से-रोकने-भविष्य-डेवलपर-गलतियों के लिए है। t आपको किसी मैनुअल या विनिर्देशन को खोजने और खोजने की आवश्यकता है। लाइब्रेरी को SELF-DOCUMENTED होना चाहिए। मैं उन गलतियों को ध्यान में रखते हुए कोड लिखता हूं जो अब से छह महीने बाद भी हो सकती हैं, और यह अभी भी एक साफ-सुथरा और दोहराव वाला कोड होने की कोशिश करता है, जो पहले से ही लिखित-से-रोकथाम-भविष्य-डेवलपर-गलतियों के लिए है। t आपको किसी मैनुअल या विनिर्देशन को खोजने और खोजने की आवश्यकता है। लाइब्रेरी को SELF-DOCUMENTED होना चाहिए। मैं उन गलतियों को ध्यान में रखते हुए कोड लिखता हूं जो अब से छह महीने बाद भी हो सकती हैं, और यह अभी भी एक साफ-सुथरा और दोहराव वाला कोड होने की कोशिश करता है, जो पहले से ही लिखित-से-रोकथाम-भविष्य-डेवलपर-गलतियों के लिए है।


2
आपके पोस्ट को पढ़ना बहुत कठिन है। कृपया अपने पोस्ट को फिर से करें ताकि आपको अन्य सभी की तरह StackExchange Markdown की आदत हो। नहीं है एक कारण है कि StackExchange साइटों TinyMCE का उपयोग नहीं करते , लेकिन अगर आप इसके साथ एक चंगुल में है, में शामिल हो मेटा
वोलोमाइक

यह थोड़ा अजीब है कि $आप पहले से ही $कॉल करने के लिए उपयोग करने के बाद उपलब्धता के लिए जांच करते हैं $(document).ready(function() { } );। अगर jQuery उपलब्ध है, तो आप इसकी जाँच करें तो अच्छा है, लेकिन इस बिंदु पर पहले ही बहुत देर हो चुकी है।
मचियल

@ माचिल, आप पूरी तरह से सही हैं। सौभाग्य से मैं सिर्फ अपनी स्क्रिप्ट की जांच करने के लिए गया था, और वे तैयार घटना का उपयोग नहीं करते हैं। हाँ, धन्यवाद, जब मैंने यह कहा तो मुझे बेवकूफ लगा, लेकिन सौभाग्य से मैंने अभी-अभी जाँच की है कि मेरी लिपियों में चेकिंग "install_this_script ()" नामक फ़ंक्शन के अंदर है, और इस तरह की स्थापना में मैं लाइब्रेरी के इनिट फ़ंक्शन को कॉल करता हूं, लेकिन इससे पहले, मैं जांचता हूं (OUTSIDE JQUERY) अगर $ ऑब्जेक्ट को परिभाषित किया गया है या नहीं। वैसे भी, भाई, तुम सच में मुझे बाहर निकाल दिया! मुझे डर है कि यह पोस्ट यहां बहुत लंबी थी, मुझे उम्मीद है कि इस गलती ने अन्य पाठकों को बहुत नुकसान नहीं पहुंचाया है। मैंने पोस्ट को ठीक किया।
डेविड एल

यह असली जवाब होना चाहिए! धन्यवाद!
जस्टिन टी। वाट्स

6

व्यूपोर्ट के आकार बदलने पर पता लगाने के लिए आप $ (विंडो) .resize () का उपयोग कर सकते हैं।

jQuery के पास स्क्रॉल पट्टी मौजूद होने पर व्यूपोर्ट [1] की सही चौड़ाई और ऊंचाई का लगातार पता लगाने के लिए कोई कार्य नहीं होता है।

मुझे एक समाधान मिला जो मॉडर्निज़्र लाइब्रेरी और विशेष रूप से mq फ़ंक्शन का उपयोग करता है जो जावास्क्रिप्ट के लिए मीडिया क्वेरी खोलता है।

यहाँ मेरा समाधान है:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

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

शायद यह iframe के संबंध में मदद कर सकता है:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[१] आप एक नंबर प्राप्त करने के लिए $ (विंडो) .net () और $ (विंडो) .height () का उपयोग कर सकते हैं जो कुछ ब्राउज़रों में सही होगा, लेकिन दूसरों में गलत है। उन ब्राउज़रों में आप सही चौड़ाई और ऊंचाई पाने के लिए window.innerWidth और window.innerHeight का उपयोग करने का प्रयास कर सकते हैं, लेकिन मैं इस विधि के खिलाफ सलाह दूंगा क्योंकि यह उपयोगकर्ता एजेंट सूँघने पर निर्भर करेगा।

आमतौर पर अलग-अलग ब्राउज़र इस बारे में असंगत होते हैं कि वे स्क्रॉलबार को खिड़की की चौड़ाई और ऊंचाई के हिस्से के रूप में शामिल करते हैं या नहीं।

नोट: दोनों $ (विंडो) .width () और window.innerWidth एक ही ब्राउज़र का उपयोग करके ऑपरेटिंग सिस्टम के बीच भिन्न होते हैं। देखें: https://github.com/eddiemachado/bones/issues/468#issuecomment-22626268


4
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });

$ (विंडो) .height () का उपयोग करने से आपको व्यूपोर्ट का आकार नहीं मिलेगा, यह आपको पूरी विंडो का आकार देगा, जो आमतौर पर पूरे दस्तावेज़ का आकार होता है, हालांकि दस्तावेज़ और भी बड़ा हो सकता है।
अनुराज

चौड़ाई के लिए महान!
मार्क

2

पर व्यूपोर्ट का आकार प्राप्त करने के लिए लोड और पर आकार (SimaWB प्रतिक्रिया के आधार पर):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});

1

कृपया ध्यान दें कि CSS3 व्यूपोर्ट इकाइयाँ (vh, vw) iOS पर अच्छी तरह से नहीं चलेंगी। जब आप पृष्ठ को स्क्रॉल करते हैं, तो व्यूपोर्ट का आकार किसी तरह पुनर्गणना हो जाता है और आपके तत्व का आकार जो व्यूपोर्ट इकाइयों का उपयोग करता है, भी बढ़ जाता है। तो, वास्तव में कुछ जावास्क्रिप्ट की आवश्यकता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.