ब्राउज़र व्यूपोर्ट आयाम कैसे प्राप्त करें?

788

मैं अपने आगंतुकों को उच्च गुणवत्ता में चित्र देखने की क्षमता प्रदान करना चाहता हूं, क्या कोई तरीका है जिससे मैं खिड़की के आकार का पता लगा सकता हूं?

या बेहतर अभी तक, जावास्क्रिप्ट के साथ ब्राउज़र का व्यूपोर्ट आकार? यहां देखें ग्रीन एरिया:

javascript  cross-browser  viewport 
— एलिक्स एक्सल
स्रोत
10
मैं क्या कर रहा हूं, एक तत्व को आमतौर पर html को 100% ऊंचाई पर सेट करें और उसकी ऊंचाई प्राप्त करें। हर जगह सरल काम करता है।
— मुहम्मद उमेर
1
@MuhammadUmer की अच्छी पकड़! यदि आप आयामों को प्राप्त करने में निराश हो जाते हैं (और आप बिना jQuery के मोबाइल फोन पर), तो आप getComputedStyleविस्तारित htmlटैग का उपयोग कर सकते हैं ।
— Dan
इसके अलावा, आप W लाइब्रेरी का उपयोग कर सकते हैं , जो क्रॉस-ब्राउज़र व्यूपोर्ट डिटेक्शन को संभालती है;)
— pyrsmk

जवाबों:

1326

क्रॉस-ब्राउज़र @media (width) और @media (height)मान 

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

window.innerWidth तथा .innerHeight

  • हो जाता है सीएसएस व्यूपोर्ट @media (width) और @media (height)जो स्क्रॉलबार शामिल
  • initial-scaleऔर ज़ूम भिन्नता मोबाइल मानों को गलत तरीके से स्केल करने का कारण बन सकती है जिसे PPK दृश्य व्यूपोर्ट कहता है और @mediaमूल्यों से छोटा होता है
  • देशी गोलाई के कारण ज़ूम 1 पीएस मान बंद हो सकता है
  • undefined IE8 में-

document.documentElement.clientWidth तथा .clientHeight

साधन

— ryanve
स्रोत
4
@ 01100001 के $साथ बदलें verge। यदि आप jQuery में एकीकृत करना चाहते हैं तो करें jQuery.extend(verge)। देखें: verge.airve.com/#static
— ryanve
4
बस यह उल्लेख करना चाहता था कि IE8 (और शायद अन्य) में आपके पास <!DOCTYPE html>कोड काम करने के लिए पृष्ठ के शीर्ष पर होना चाहिए ।
— टज़ीरी बार योचाय
6
मैं ग्राहकों के साथ खुश नहीं हूँ / मोबाइल उपकरणों पर ऊँचाई, वास्तव में tripleodeon.com/wp-content/uploads/2011/12/table.html
— Dan
24
जब तक मैं कुछ याद नहीं कर रहा हूं, यह जवाब गलत है। क्रोम में, कम से कम, document.documentElement.clientHeightरिटर्न पेज ऊंचाई , जबकि window.innerHeightरिटर्न व्यूपोर्ट ऊंचाई । बड़ा अंतर।
— नैट
2
विभिन्न स्क्रीन आकार चर / समाधान लाइव टेस्ट: ryanve.com/lab/dimensions
— एलेक्स पंड्रिया
106

jQuery आयाम कार्य करता है

$(window).width() तथा $(window).height()

— स्कॉट एवरंडन
स्रोत
60
@allyourcode, असंभव, jQuery सभी का जवाब है ।
— Xeoncross
21
इससे व्यूपोर्ट का आकार नहीं मिलता, लेकिन समग्र दस्तावेज़ आकार। कोशिश करो।
— अलेजांद्रो गार्सिया इग्लेसियस
2
फिक्स्ड पोस्टिंग के साथ HTML के रूप में अपने ऐडऑन टूलबार प्रदर्शित करने वाले ब्राउज़रों के लिए, यह समाधान काम नहीं कर रहा है, खासकर यदि आप अपने कोड शीर्ष स्थिति और प्रतिशत में उपयोग करना चाहते हैं।
— अदीब अउरी
7
@AlejandroIglesias: नहींं, मैंने अभी इस SO पृष्ठ पर इसका परीक्षण किया है। $(window).height();536 देता है, जबकि $("html").height();रिटर्न 10599
— Flimm
2
इन आयामों को चेतावनी में स्क्रॉलबार शामिल नहीं हैं (जिनके विभिन्न ब्राउज़रों और प्लेटफार्मों में अलग-अलग आकार हैं) और इसलिए वे सीएसएस मीडिया प्रश्नों के साथ मेल नहीं खाएंगे, हालांकि यहां अन्य उत्तर इस समस्या को हल करते हैं।
— स्पेंसर ओ'रिली
75

आप window.innerWidth और window.innerHeight गुणों का उपयोग कर सकते हैं ।

इनरहाइट बनाम आउटरहाइट

— सीएमएस
स्रोत
29
हालांकि यह डायग्राम के लिए IE +1 में काम नहीं करता है: D। इस तरह के एक प्रश्न के लिए, यह एक अपराध होना चाहिए कि इनमें से अधिक न हो।
— अलॉउरकोड
8
@CMS document.documentElement.clientWidthwindow.innerWidth
— ryanve
6
@ryanve अगर "अधिक सटीक" से आपका मतलब है "दूर से भी वही काम नहीं करता है" तो हाँ: P
— बॉक्सिंग
फ़ायरफ़ॉक्स बीटा? यह कुछ संग्रहालय का है।
— डेरेक 會 功夫 ere
@ बॉक्सड इन मोबाइल सफारी, document.documentElement.clientWidthमुझे व्यूपोर्ट की चौड़ाई देता है जबकि window.innerWidth मुझे डॉक्यूमेंट की चौड़ाई देता है। हां, वह दौर।
— जॉन
33

यदि आप jQuery का उपयोग नहीं कर रहे हैं, तो यह बदसूरत हो जाता है। यहां एक स्निपेट है जो सभी नए ब्राउज़रों पर काम करना चाहिए। IE में Quirks मोड और मानक मोड में व्यवहार भिन्न होता है। यह इसका ख्याल रखता है।

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;
— चेतन शास्त्री
स्रोत
8
क्या यह आपको पृष्ठ की ऊँचाई नहीं देता, व्यूपोर्ट नहीं? इस पृष्ठ से यही प्रतीत होता है: डेवलपर
— pmozilla.org/en/DOM/element.clientHeight
4
आप तत्व clientHeightपर उपयोग कर रहे हैं document.documentElement, जो आपको व्यूपोर्ट का आकार देगा। दस्तावेज़ का आकार प्राप्त करने के लिए, आपको करने की आवश्यकता होगी document.body.clientHeight। जैसा कि चेतन बताते हैं, यह व्यवहार आधुनिक ब्राउज़रों पर लागू होता है। यह परीक्षण करना आसान है। बस एक कंसोल खोलें और document.documentElement.clientHeightकई खुले टैब पर टाइप करें।
— गजस
13

मुझे पता है कि इसका एक स्वीकार्य जवाब है, लेकिन मैं ऐसी स्थिति में चला गया, जहां clientWidthकाम नहीं किया, क्योंकि iPhone (कम से कम मेरा) 980, 320 नहीं, इसलिए मैंने वापस लौटा दिया, इसलिए मैंने इस्तेमाल किया window.screen.width। मैं मौजूदा साइट पर काम कर रहा था, जिसे "उत्तरदायी" बनाया जा रहा था और एक अलग मेटा-व्यूपोर्ट का उपयोग करने के लिए बड़े ब्राउज़रों को मजबूर करने की आवश्यकता थी।

आशा है कि यह किसी की मदद करता है, यह सही नहीं हो सकता है, लेकिन यह iOs और Android पर मेरे परीक्षण में काम करता है। 

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);
— जाज का
स्रोत
13

मैंने क्रॉस ब्राउज़र तरीका देखा और पाया:

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>
स्निपेट का विस्तार करें

— user2921779
स्रोत
ध्यान दें कि कोड स्निपेट के आस-पास iframe के स्टैक्वेरफ्लो का उपयोग परिणाम को गड़बड़ कर देता है
— मिलर
11

मैं जावास्क्रिप्ट में एक निश्चित जवाब खोजने में सक्षम था: निश्चित गाइड, ओ'रिली द्वारा 6 संस्करण, पी। 391:

यह समाधान क्वर्क्स मोड में भी काम करता है, जबकि रेनवे और स्कॉटएवरंडन का वर्तमान समाधान नहीं है।

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

इस तथ्य को छोड़कर कि मुझे आश्चर्य है कि लाइन क्यों if (document.compatMode == "CSS1Compat")नहीं है if (d.compatMode == "CSS1Compat"), सब कुछ अच्छा लग रहा है।

— nonopolarity
स्रोत
क्या आप रेटिना डिस्प्ले या लैंडस्केप बनाम पोर्ट्रेट या मेटा व्यूपोर्ट टैग के बारे में बात कर रहे हैं? आप का मतलब यह नहीं है कि जैसा कि स्नोड्रैगनल्डहेड . com/ में है ?
— एकाधिकार
1) जब हाई-डीपीआई डिस्प्ले के बारे में बात की जाती है, तो मेरा मतलब है कि वर्चुअल पिक्सल ने यहाँ समझाया: stackoverflow.com/a/14325619/133361 । हर iPhone स्क्रीन बिल्कुल 320 आभासी पिक्सेल चौड़ी है। 2) मैं कहता हूं कि: a) documentElement.clientWidthiOS पर डिवाइस ओरिएंटेशन परिवर्तन पर प्रतिक्रिया नहीं देता है। b) वर्चुअल पिक्सल के बजाय फिजिकल पिक्सल काउंट (व्यावहारिक रूप से बेकार) प्रदर्शित करता है
— Dan
11

यदि आप गैर-jQuery समाधान की तलाश कर रहे हैं जो मोबाइल पर वर्चुअल पिक्सल में सही मान देता है , और आपको लगता है कि सादे window.innerHeightया document.documentElement.clientHeightआपकी समस्या को हल कर सकते हैं, तो कृपया इस लिंक का पहले अध्ययन करें: https://tripleodeon.com/assets/2011/12/ table.html

डेवलपर ने अच्छा परीक्षण किया है जो समस्या का खुलासा करता है: आप एंड्रॉइड / आईओएस, लैंडस्केप / पोर्ट्रेट, सामान्य / उच्च घनत्व डिस्प्ले के लिए अप्रत्याशित मान प्राप्त कर सकते हैं।

मेरा वर्तमान उत्तर अभी तक चांदी की गोली नहीं है (// टूडू), बल्कि उन लोगों के लिए एक चेतावनी है जो इस धागे से किसी भी समाधान को उत्पादन कोड में जल्दी से कॉपी-पेस्ट करने जा रहे हैं।

मैं मोबाइल पर वर्चुअल पिक्सल में पेज की चौड़ाई की तलाश कर रहा था , और मैंने पाया है कि केवल काम करने वाला कोड (अप्रत्याशित रूप से!) है window.outerWidth। मैं बाद में नेविगेशन बार को छोड़कर ऊंचाई देने वाले सही समाधान के लिए इस तालिका की जांच करूंगा, जब मेरे पास समय होगा।

— सज्जन
स्रोत
10

यह कोड http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ से है

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' ] };
}

नायब: चौड़ाई पढ़ने के लिए, उपयोग करें console.log('viewport width'+viewport().width);

— जेवियर ब्लॉन्डेल
स्रोत
9

window.innerHeightऔर के बीच अंतर है document.documentElement.clientHeight। पहले में क्षैतिज स्क्रॉलबार की ऊंचाई शामिल है।

— स्ज़ेप विक्टर
स्रोत
1
क्या आपने रेटिना डिस्प्ले पर और लैंडस्केप / पोर्ट्रेट मोड्स में अपने जवाब का OSes पर परीक्षण किया? यह लिंक पुरानी प्रणालियों को शामिल करता है, लेकिन यह साबित करता है कि आपका कोड काम नहीं करता है: tripleodeon.com/wp-content/uploads/2011/12/table.html
— Dan
6

W3C मानकों के अनुरूप एक समाधान एक पारदर्शी div (उदाहरण के लिए गतिशील रूप से जावास्क्रिप्ट के साथ) बनाने के लिए होगा, इसकी चौड़ाई और ऊंचाई 100vw / 100vh (Viewport यूनिट्स) पर सेट करें और फिर इसकी ऑफसेटविट और ऑफसेटहाइट प्राप्त करें। उसके बाद, तत्व को फिर से हटाया जा सकता है। यह पुराने ब्राउज़रों में काम नहीं करेगा क्योंकि व्यूपोर्ट इकाइयाँ अपेक्षाकृत नई हैं, लेकिन यदि आप उनके बारे में नहीं बल्कि इसके बारे में (जल्द ही होने वाले) मानकों के बारे में परवाह करते हैं, तो आप निश्चित रूप से इस तरह से जा सकते हैं:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

बेशक, आप objNode.style.position = "निश्चित" भी सेट कर सकते हैं और फिर चौड़ाई / ऊंचाई के रूप में 100% का उपयोग कर सकते हैं - इसका प्रभाव समान होना चाहिए और कुछ हद तक संगतता में सुधार करना चाहिए। इसके अलावा, स्थिति को निर्धारित करने के लिए सामान्य रूप से एक अच्छा विचार हो सकता है, क्योंकि अन्यथा div अदृश्य हो जाएगा, लेकिन कुछ स्थान का उपभोग करेगा, जिससे स्क्रॉलबार दिखाई देगा आदि।

— अग्नि की बरसात
स्रोत
दुर्भाग्य से, वास्तविकता पूरी तरह से आपके "W3C - मानकों के समाधान" को नष्ट कर देती है: 1) caniuse.com/viewport-units , 2) caniuse.com/#feat=css-fixed । डेवलपर्स को जो समाधान चाहिए वह काम करता है, न कि "सैद्धांतिक रूप से काम करना चाहिए"।
— दान
यदि हम मानकों पर भरोसा कर सकते हैं तो हमें उन सभी क्रॉस ब्राउज़र समाधानों की भी आवश्यकता नहीं है। एक समाधान जो युक्ति पर उत्तर देता है वह समाधान नहीं है।
— डेरेक 會 功夫 ere
3

यह ऐसा करने का तरीका है, मैंने इसे IE 8 -> 10, FF 35, Chrome 40 में आज़माया, यह सभी आधुनिक ब्राउज़रों में बहुत सुचारू रूप से काम करेगा (जैसा कि window.innerWidth परिभाषित है) और IE 8 में (बिना किसी विंडो के)। इनरव्हीड) यह सुचारू रूप से काम करता है, किसी भी मुद्दे (जैसे अतिप्रवाह के कारण चमकती: "छिपी हुई"), कृपया इसकी रिपोर्ट करें। मैं वास्तव में व्यूपोर्ट ऊँचाई पर दिलचस्पी नहीं ले रहा हूं क्योंकि मैंने यह फ़ंक्शन केवल कुछ उत्तरदायी टूल को हल करने के लिए बनाया था, लेकिन इसे लागू किया जा सकता है। आशा है कि यह मदद करता है, मैं टिप्पणियों और सुझावों की सराहना करता हूं।

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}
— manolinjr81
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.