स्क्रॉल का उपयोग करके jquery का उपयोग किए बिना ब्राउज़र व्यूपोर्ट की ऊंचाई और चौड़ाई प्राप्त करें?

Question

मैं jQuery का उपयोग करके बिना स्क्रॉलबार के ब्राउज़र व्यूपोर्ट की ऊंचाई और चौड़ाई कैसे प्राप्त करूं?

यहाँ है जो मैंने अब तक कोशिश की है:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

यह समाधान ब्राउज़र स्क्रॉलबार को ध्यान में नहीं रखता है।

Comments

कैसे (माइनस) स्क्रॉलबार के बिना स्क्रीन की चौड़ाई प्राप्त करने के लिए

— mrbengi

Answer 1

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

और जानकारी

• http://api.jquery.com/height/
• http://api.jquery.com/width/

हालाँकि, उन मूल्यों को प्राप्त करने के लिए jQuery का उपयोग करना आवश्यक नहीं है। उपयोग

document.documentElement.clientHeight;
document.documentElement.clientWidth;

स्क्रॉलबार को छोड़कर आकार प्राप्त करने के लिए, या

window.innerHeight;
window.innerWidth;

स्क्रॉलबार सहित संपूर्ण व्यूपोर्ट प्राप्त करने के लिए।

document.documentElement.clientHeight <= window.innerHeight;  // is always true

Comments

धन्यवाद काइल, इसमें ब्राउज़र स्क्रॉलबार शामिल नहीं है, है ना?

— यति बेनेन

मैं इसके बारे में जो कुछ भी समझता हूं, वह ब्राउज़र का 'व्यूपोर्ट' है, जो भी देखने योग्य है, और चूंकि स्क्रॉल बार में इस पर सामग्री नहीं हो सकती है, इसलिए मैं मान लूंगा कि यह गणना का हिस्सा नहीं है। हालांकि यह इस बात पर निर्भर करता है कि ब्राउज़र लेखक इसे कैसे लागू करते हैं।

— काइल

व्यूपोर्ट का मतलब साइट की विंडो की पूरी चौड़ाई / ऊँचाई नहीं है, यह सिर्फ व्यूपोर्ट है, `` window.innerHeight जैसे कुछ का उपयोग करें; window.innerWidth; `` `

— acidjazz

@Kyle आप पूरी तरह से सही हैं, जैसा कि यहाँ कहा गया है: w3schools.com/css/css_rwd_viewport.asp व्यूपोर्ट किसी वेब पेज का उपयोगकर्ता का दृश्य क्षेत्र है।

— ब्रैड एडम्स

ब्राउज़र विंडो व्यूपोर्ट की ऊँचाई (पिक्सेल में), यदि प्रदान की गई है, तो क्षैतिज स्क्रॉलबार। । स्रोत: developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

— मार्सन पारुलियन

Answer 2

JQuery का उपयोग न करें, केवल सही परिणाम के लिए जावास्क्रिप्ट का उपयोग करें:

इसमें स्क्रॉलबार चौड़ाई / ऊँचाई शामिल है:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

यह स्क्रॉलबार चौड़ाई / ऊँचाई को बाहर करता है:

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

Comments

धन्यवाद, jQuery के इनरव्हीड और इनरहाइट तरीके वास्तव में गलत परिणाम लौटाते हैं।

— जॉक

console.log (window.innerHeight); console.log (document.body.clientHeight); कंसोल.लॉग ($ (विंडो) .height) (); अंतिम सही नहीं है। आपका समाधान मेरे लिए सबसे अच्छा है। धन्यवाद।

— अली

Answer 3

यहाँ जेनेरिक जेएस है जो अधिकांश ब्राउज़रों में काम करना चाहिए (FF, Cr, IE6 +):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

Comments

यह केवल मेरे लिए काम किया। खिड़की। ऊंचाई कुछ ऐसा दे रही है, जिसकी मैं कोई गणना नहीं कर सकता।

— अमित कुमार गुप्ता

Answer 4

आप गलत तरीके से कॉल का उपयोग कर रहे हैं। एक व्यूपोर्ट "विंडो" है जो दस्तावेज़ पर खुला है: आप इसे कितना देख सकते हैं और कहाँ।

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

वास्तविक व्यूपोर्ट के उपयोग का आकार प्राप्त करने के लिए window.innerHeightऔर window.innerWidth।

https://gist.github.com/bohman/1351439

JQuery के तरीकों का उपयोग न करें, जैसे $(window).innerHeight(), ये गलत नंबर देते हैं। वे आपको खिड़की की ऊंचाई देते हैं, नहीं innerHeight।

Comments

जब विंडो में स्क्रॉलबार (ब्राउज़र द्वारा जोड़ा गया) होता है, window.innerWidthतो व्यूपोर्ट की चौड़ाई + स्क्रॉलबार की चौड़ाई वापस आ जाती है। इस स्थिति में मुझे क्या करना चाहिए?

— विक्टर

Answer 5

विवरण

निम्नलिखित आपको ब्राउज़र व्यूपोर्ट का आकार देगा।

नमूना

$(window).height();   // returns height of browser viewport
$(window).width();   // returns width of browser viewport

अधिक जानकारी

• jQuery.height ()
• jQUery.width ()

Answer 6

जैसा कि काइल ने सुझाव दिया था, आप इस तरह से स्क्रॉल बार के आकार को ध्यान में रखे बिना क्लाइंट ब्राउज़र व्यूपोर्ट आकार को माप सकते हैं।

नमूना (व्यूपोर्ट आयाम बिना स्क्रॉल बार)

// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');

// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

वैकल्पिक रूप से यदि आप स्क्रॉल बार के आकार को ध्यान में रखते हुए ग्राहक व्यूपोर्ट के आयामों को खोजना चाहते हैं, तो यह नमूना आपको अच्छा लगता है।

पहले यह सुनिश्चित करने के लिए कि आप माप सही है, केवल 100% चौड़ाई और ऊंचाई होने के लिए आपको बॉडी टैग सेट करना न भूलें।

body { 
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}

नमूना (स्क्रॉल पट्टियों के साथ व्यूपोर्ट आयाम)

// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');

// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

Answer 7

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

Html5 के लिए: <!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 विनिर्देशन के साथ, यह संतोषजनक रूप से हल हो गया है, और मुझे पूरा यकीन है कि आप पेप्स "बदलते स्क्रॉल-ओवरफ्लो को छिपाएंगे और फिर वापस" से बचेंगे, जो कि, मुझे खेद है, थोड़ा गंदा चाल है, विशेषकर यदि आप डॉन ' टी इसे भविष्य के प्रोग्रामर के उपयोग के लिए कोड पर दस्तावेज़ करें।

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

$(document).ready(function() {
    if(typeof $=='undefined') {
        alert("Error, you haven't called 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");
    } 
});

Answer 8

$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});

Answer 9

JQuery का उपयोग कर रहा है ...

$ (दस्तावेज़) .height () और $ (विंडो) .height () समान मान लौटाएगा ... कुंजी शरीर की गद्दी और मार्जिन को रीसेट करना है ताकि आपको कोई स्क्रॉलिंग न मिले।

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

उम्मीद है की यह मदद करेगा।

Answer 10

मैं चौड़ाई स्क्रीन और छोटे स्क्रीन के लिए अपनी वेबसाइट का एक अलग रूप चाहता था। मैंने 2 सीएसएस फाइलें बनाई हैं। जावा में मैं चुनता हूं कि स्क्रीन चौड़ाई के आधार पर 2 सीएसएस फ़ाइल का उपयोग किया जाता है। मैं के echoसाथ PHP समारोह का उपयोग करेंecho कुछ जावास्क्रिप्ट -function ।

मेरी <header>PHP-file के अनुभाग में मेरा कोड :

<?php
echo "
<script>
    if ( window.innerWidth > 400)
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
    else
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
"; 
?>