स्क्रीन, वर्तमान वेब पेज और ब्राउज़र विंडो का आकार प्राप्त करें

Question

मैं कैसे प्राप्त कर सकते हैं windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYजो सभी प्रमुख ब्राउज़रों में काम करेंगे?

Comments

पेजहाइट (एक तस्वीर पर) यू के साथ प्राप्त कर सकते हैं: document.body.scrollHeight

— befzz

देख https://developer.mozilla.org/en-US/docs/Web/API/Window.screen और http://www.quirksmode.org/dom/w3c_cssom.html#screenview

— rawiro

क्या यह प्रासंगिक हो सकता है? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

— MEM

दिलचस्प: ryanve.com/lab/dimensions

— e2-e4

सहायक ट्यूटोरियल - w3schools.com/jsref/prop_win_innerheight.asp

— चाचा Iroh

Answer 1

आप jQuery के साथ विंडो या दस्तावेज़ का आकार प्राप्त कर सकते हैं:

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

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

स्क्रीन आकार के लिए आप screenऑब्जेक्ट का उपयोग कर सकते हैं :

window.screen.height;
window.screen.width;

Comments

JQuery विधि ऊंचाई () सभी तत्वों के लिए काम करती है, और 46सीएसएस ('ऊंचाई') ( "46px") की तरह एक संख्या ( ) के बजाय एक रिटर्न ( ) देता है।

— क्रिस

मोबाइल सफारी के साथ काम करते समय, दुख की बात है कि jQuery इस सवाल का एक सही समाधान नहीं है। नोट को लाइन # 13 पर github.com/jquery/jquery/blob/master/src/dimensions.js

— जोशुआ

@ @ Answer 웃웃 आपने उत्तर में क्या संपादित किया? संशोधन के अनुसार, आप सभी पर कुछ भी संपादित नहीं किया

— डैनियल डब्ल्यू

@Marco Kerwitz सबसे बुरी बात यह है कि मैंने "जावास्क्रिप्ट को खिड़की की चौड़ाई प्राप्त की" टाइप किया और इस उत्तर की सामग्री Google पर थी। मुझसे बड़ा माइनस।

— मैकीज क्रैन्ज़क

ओपी डीआईडी ​​एएसके कि jquery एक विकल्प है। जो भी निंजा ने इसे बाहर करने के लिए मूल प्रश्न को संपादित किया वह यहां गलती पर है, न कि लोगों को एक विश्व-स्वीकृत जावास्क्रिप्ट पुस्तकालय का उपयोग करके कानूनी जवाब देने के लिए।

— अतुल्य समय

Answer 2

इसके पास वह सब कुछ है जो आपको जानना चाहिए: व्यूपोर्ट / विंडो का आकार प्राप्त करें

लेकिन संक्षेप में:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

बेला

कृपया इस उत्तर को संपादित करना बंद करें। इसे अब अलग-अलग लोगों द्वारा 22 बार संपादित किया गया है ताकि उनकी कोड प्रारूप पसंद को मैच किया जा सके। यह भी बताया गया है कि यह आवश्यक नहीं है यदि आप केवल आधुनिक ब्राउज़र को लक्षित करना चाहते हैं - यदि ऐसा है तो आपको केवल निम्नलिखित की आवश्यकता है:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

Comments

क्यों नहीं g = document.body?

— एक भुगतान किया बेवकूफ

@apaidnerd: IE8 जैसे ब्राउज़रों को धता बताने वाले मानक document.body का समर्थन नहीं करते हैं। IE9, हालांकि, करता है।

— माइकल मिकोव्स्की

@MichaelMikowski यह सच नहीं है! यहां तक ​​कि IE5 का समर्थन करता है document.body।

— नक्स

@ Nux मैं सही खड़ा है, और मैं IE8 में समर्थन की पुष्टि की है। हालांकि मुझे पता है कि कम से कम एक ब्राउजर जिसे हम हाल ही में लक्षित कर रहे थे, उसने डॉक्यूमेंट का समर्थन नहीं किया था। किसी और को हमें getElementsByTagName दृष्टिकोण का उपयोग करने के लिए बदलना पड़ा। लेकिन मुझे लगता है कि मैंने ब्राउज़र को गलत समझा। माफ़ करना!

— माइकल मकोव्स्की

मैं बहुत ही संक्षिप्त रूप से यह कहना चाहूंगा कि एक अक्षर वाले चर नाम कभी मददगार नहीं होते हैं।

— wybe

Answer 3

यहाँ शुद्ध जावास्क्रिप्ट ( स्रोत ) के साथ एक क्रॉस ब्राउज़र समाधान है :

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Comments

यह बेहतर है क्योंकि यदि आप स्क्रिप्ट को लोडिंग प्रक्रिया (अक्सर विचार) में जल्दी कॉल करने में सक्षम होते हैं, तो यह body elementमान वापस कर देगा undefinedक्योंकि डोम अभी तक लोड नहीं हुआ है।

— dgo

हा! पुराना धागा लेकिन इसके लिए धन्यवाद! मुझे लगता है कि मैं उन पुराने "इडियट्स" में से एक हूं जो पुराने घरेलू उपयोगकर्ताओं की आश्चर्यजनक संख्या के लाभ के लिए जब संभव हो तो कम से कम IE8 का समर्थन करने की कोशिश करता है जो कभी भी XP का उपयोग करना बंद नहीं करेंगे जब तक कि उनकी मशीनें आग नहीं पकड़ती हैं। मैं सवाल पूछने के बजाय थक जाता हूं और जवाब देने के बजाय, केवल "STOP सपोर्टिंग IE8" के साथ वोट कर रहा हूं !! एक टिप्पणी के रूप में। फिर से धन्यवाद! इसने मेरे लिए एक शुद्ध जावास्क्रिप्ट फोटो ज़ूम में एक समस्या को हल किया जो मैंने किया था। IE8 पर इसका थोड़ा धीमा है, लेकिन अब कम से कम यह काम करता है !!! :-)

— रैंडी

महान यह आराम से बहुत बेहतर है।

— विनायक शाहदेव

Answer 4

उपलब्ध स्क्रीन आयाम प्राप्त करने के लिए एक गैर- jQuery तरीका। window.screen.width/heightपहले से ही डाल दिया गया है, लेकिन उत्तरदायी वेब डिज़ाइन और पूर्णता के लिए मुझे लगता है कि उन विशेषताओं का उल्लेख करने के लिए इसके लायक है:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth और availHeight - स्क्रीन पर उपलब्ध चौड़ाई और ऊंचाई (OS टास्कबार और ऐसे को छोड़कर)।

Comments

एंड्रॉइड क्रोम ब्राउजर पर चौड़ाई स्क्रीन.हाईट के समान ही पिक्सेल अनुपात द्वारा विभाजित किया गया है :(

— Darius.V

window.screen.availHeightलगता है कि पूर्ण स्क्रीन मोड ताकि सामान्य स्क्रीन मोड स्क्रॉल (फ़ायरफ़ॉक्स और क्रोम में परीक्षण) को मजबूर करता है।

— सुजाना

@Suzana_K तो window.screen.heightइसके बजाय का उपयोग करें ।

— vallentin

Answer 5

लेकिन जब हम उत्तरदायी स्क्रीन के बारे में बात करते हैं और यदि हम किसी कारण से jQuery का उपयोग करके इसे संभालना चाहते हैं,

window.innerWidth, window.innerHeight

सही माप देता है। यहां तक ​​कि यह स्क्रॉल-बार के अतिरिक्त स्थान को हटा देता है और हमें उस स्थान को समायोजित करने के बारे में चिंता करने की आवश्यकता नहीं है :)

Comments

यह भार के भार के साथ स्वीकृत उत्तर होना चाहिए। वर्तमान में स्वीकृत उत्तर की तुलना में बहुत अधिक उपयोगी उत्तर है, और यह jQuery पर निर्भर नहीं करता है।

— डेवलपर

दुर्भाग्य से, window.innerWidthऔर window.innerHeightस्क्रॉल बार के आकार को ध्यान में रखने में विफल। यदि स्क्रॉल बार मौजूद हैं, तो ये विधियाँ लगभग सभी डेस्कटॉप ब्राउज़रों में विंडो के आकार के लिए गलत परिणाम देती हैं। देखें stackoverflow.com/a/31655549/508355

— hashchange

Answer 6

आप ब्राउज़र टूलबार और अन्य सामान से बचकर भी WINDOW की चौड़ाई और ऊँचाई प्राप्त कर सकते हैं। यह ब्राउज़र की विंडो में वास्तविक प्रयोग करने योग्य क्षेत्र है ।

ऐसा करने के लिए, का उपयोग करें: window.innerWidth और window.innerHeightगुण ( w3schools पर डॉक्टर देखें )।

ज्यादातर मामलों में, यह सबसे अच्छा तरीका होगा, उदाहरण के लिए, एक पूरी तरह से केंद्रित फ्लोटिंग मोडल संवाद प्रदर्शित करने के लिए। यह आपको विंडो पर पदों की गणना करने की अनुमति देता है, कोई भी बात नहीं जो संकल्प अभिविन्यास या विंडो आकार ब्राउज़र का उपयोग कर रहा है।

Comments

यह w3schools के अनुसार ie8 और न ही ie7 में समर्थित नहीं है। जब आप w3schools से लिंक करते हैं, तब भी आपको अवश्य देखना चाहिए। देखें meta.stackexchange.com/questions/87678/...

— thecarpy

Answer 7

function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');

Answer 8

"कंसोल" का उपयोग करके या "निरीक्षण" पर क्लिक करने के बाद किसी भी वेबसाइट के अपने वर्तमान लोड किए गए पृष्ठ की ऊंचाई और चौड़ाई की जांच करने के लिए ।

चरण 1 : माउस के दाहिने बटन पर क्लिक करें और 'निरीक्षण' पर क्लिक करें और फिर 'कंसोल' पर क्लिक करें।

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

चरण 3 : अब, साइन ('>') से अधिक के बाद निम्नलिखित लिखें

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

Comments

यह चयनित उत्तर क्यों नहीं है?

— इयूलियन ओनोफ्रेई

@IulianOnofrei क्योंकि यह पूरी तरह से सवालों के मूल सेट का जवाब नहीं देता है। मजाक किया जा रहा है, यह मेरे लिए सही जवाब है।

— लूट

अगर व्यूपोर्ट स्केल 1 है तो इनरव्हीड और इनरहाइट केवल सटीक हैं। यह डिफ़ॉल्ट है, लेकिन सीएसएस ट्रांसफ़ॉर्म का उपयोग करके अनजाने में इसे बदला जा सकता है।

— विक्टर स्टोडार्ड

"window.innerWidth" ने "screen.width" के विपरीत मेरे लिए उपयोगकर्ता के ब्राउज़र का आकार निर्धारित करने के लिए काम किया - धन्यवाद!

— केविन पजाक

Answer 9

आप दस्तावेज़ चौड़ाई और ऊंचाई (के लिए वास्तव में एक बुलेटप्रूफ समाधान की जरूरत है pageWidthऔर pageHeightचित्र में), तो आप मेरा एक प्लगइन का उपयोग कर, विचार करना चाह सकते jQuery.documentSize ।

इसका सिर्फ एक उद्देश्य है: हमेशा सही दस्तावेज़ आकार वापस करना, यहां तक ​​कि परिदृश्यों में भी जब jQuery और अन्य तरीके विफल हो जाते हैं । इसके नाम के बावजूद, आपको आवश्यक रूप से jQuery का उपयोग करने की आवश्यकता नहीं है - यह वेनिला जावास्क्रिप्ट में लिखा है और jQuery के बिना भी काम करता है।

उपयोग:

var w = $.documentWidth(),
    h = $.documentHeight();

वैश्विक के लिए document। अन्य दस्तावेज़ों के लिए, उदाहरण के लिए आपके द्वारा एक्सेस किए गए एम्बेडेड iframe में, दस्तावेज़ को पैरामीटर के रूप में पास करें:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

अद्यतन: अब खिड़की के आयामों के लिए भी

संस्करण 1.1.0 के बाद से, jQuery.documentSize भी विंडो आयामों को संभालता है।

यह आवश्यक है क्योंकि

• $( window ).height()है आईओएस में गाड़ी बेकार जा रहा है की बात करने,
• $( window ).width()और मोबाइल पर अविश्वसनीय$( window ).height() हैं क्योंकि वे मोबाइल ज़ूमिंग के प्रभावों को नहीं संभालते हैं।

jQuery.documentSize प्रदान करता है $.windowWidth()और $.windowHeight(), जो इन मुद्दों को हल करता है। अधिक जानकारी के लिए, कृपया दस्तावेज़ देखें ।

Comments

VM2859: 1 अनकैप्ड DOMException: मूल " लोकलहोस्ट: 12999 " के साथ एक फ्रेम को क्रॉस- ऑरिजनल फ्रेम तक पहुँचने से रोक दिया गया । (...) इस पर आने के लिए कोई रास्ता नहीं है ???

— फ़िज़महाद

आप एक अलग डोमेन से iframes का उपयोग नहीं कर सकते हैं, यह एक ही मूल नीति का उल्लंघन करता है । की जाँच करें इस जवाब ।

— हैशचेंज

यह काम नहीं कर रहा है यदि आप एक iframe एम्बेड कर रहे हैं और व्यू पोर्ट की ऊंचाई प्राप्त करने की कोशिश कर रहे हैं। window.innerHeight दस्तावेज़ की ऊंचाई के बराबर है जो छोटी गाड़ी है। आप फ़्रेम तक नहीं पहुँच सकते। एक अलग डोमेन से यह संभव समाधान नहीं है।

— एम। तुलसौद

@ M.Abulsoud बशर्ते आपके पास iframe (कोई CORS उल्लंघन) तक पहुंच नहीं है, यह काम करता है और परीक्षण सूट द्वारा कवर किया गया है। इस वाक्यविन्यास का उपयोग करें । यह भी कई iframes एक दूसरे के अंदर नेस्टेड के साथ काम करता है - कोडपेन पर इस उदाहरण को देखें । यदि आपका सेटअप आम तौर पर काम करता है, लेकिन एक विशिष्ट ब्राउज़र में विफल रहता है, तो यह एक बग हो सकता है जिसकी मुझे जानकारी नहीं है। शायद आप उस मामले में एक मुद्दा खोल सकते हैं? धन्यवाद।

— हैशचेंज

Answer 10

मैंने एक छोटी सी जावास्क्रिप्ट पुस्तिका लिखी जिसका उपयोग आप आकार प्रदर्शित करने के लिए कर सकते हैं। आप इसे आसानी से अपने ब्राउज़र में जोड़ सकते हैं और जब भी आप इसे क्लिक करेंगे तो आपको अपने ब्राउज़र विंडो के दाएं कोने में आकार दिखाई देगा।

यहां आपको जानकारी मिलती है कि कैसे एक बुकमार्कलेट का उपयोग करना है https://en.wikipedia.org/wiki/Bookmarklet

बुकमार्कलेट

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

मूल कोड

मूल कोड कॉफी में है:

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

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

Answer 11

उत्तरदायी लेआउट से संबंधित कुछ मामलों $(document).height()में गलत डेटा वापस आ सकता है जो केवल पोर्ट ऊंचाई को दिखाता है। उदाहरण के लिए जब कुछ div # आवरण में ऊँचाई होती है: 100%, तो #wrapper को इसके अंदर कुछ ब्लॉक करके बढ़ाया जा सकता है। लेकिन यह ऊंचाई अभी भी व्यूपोर्ट ऊंचाई की तरह होगा। ऐसी स्थिति में आप उपयोग कर सकते हैं

$('#wrapper').get(0).scrollHeight

यह रैपर के वास्तविक आकार का प्रतिनिधित्व करता है।

Comments

सैकड़ों उत्थान के साथ इतने सारे उत्तर लेकिन केवल यह एक उपयोगी था।

— नैकिलोन

Answer 12

स्क्रीन आकार से संबंधित पूरा गाइड

जावास्क्रिप्ट

ऊंचाई के लिए:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

नोट: जब विंडो अधिकतम हो जाएगी तो यह स्क्रीन के बराबर होगी

चौड़ाई के लिए:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

jQuery

ऊंचाई के लिए:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

चौड़ाई के लिए:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

संदर्भ: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

Answer 13

मैंने डेस्कटॉप और मोबाइल ब्राउज़र के लिए वास्तविक व्यूपोर्ट आकार जानने के लिए एक पुस्तकालय विकसित किया है, क्योंकि व्यूपोर्ट का आकार उपकरणों में असंगत है और उस पोस्ट के सभी उत्तरों (इस बारे में किए गए सभी शोधों के अनुसार) पर भरोसा नहीं कर सकता है: https: //ithub .com / pyrsmk / डब्ल्यू

Answer 14

कभी-कभी आपको विंडो और आंतरिक सामग्री का आकार बदलते समय चौड़ाई / ऊँचाई में परिवर्तन देखने की आवश्यकता होती है।

उसके लिए मैंने एक छोटी स्क्रिप्ट लिखी है जो एक लॉग बॉक्स जोड़ता है जो गतिशील रूप से सभी आकार बदलने और लगभग तुरंत अपडेट करने की निगरानी करता है।

यह निश्चित स्थिति और उच्च z- इंडेक्स के साथ एक मान्य HTML जोड़ता है, लेकिन काफी छोटा है, इसलिए आप निम्न कर सकते हैं :

• वास्तविक साइट पर इसका उपयोग करें
• मोबाइल / उत्तरदायी विचारों के परीक्षण के लिए इसका उपयोग करें

पर परीक्षण किया गया: Chrome 40, IE11, लेकिन अन्य / पुराने ब्राउज़रों पर भी काम करना बहुत संभव है ... :)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

संपादित करें: अब शैलियों को केवल लकड़हारा तालिका तत्व पर लागू किया जाता है - सभी तालिकाओं में नहीं - यह भी एक jQuery- मुक्त समाधान है :)

Answer 15

की शुरूआत के साथ globalThisमें ES2020 तुम जैसे गुणों का उपयोग कर सकते हैं।

स्क्रीन के आकार के लिए:

globalThis.screen.availWidth 
globalThis.screen.availHeight

खिड़की के आकार के लिए

globalThis.outerWidth
globalThis.outerHeight

ऑफसेट के लिए:

globalThis.pageXOffset
globalThis.pageYOffset

...& जल्द ही।

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)

Answer 16

इसे प्राप्त करने के लिए आप स्क्रीन ऑब्जेक्ट का उपयोग कर सकते हैं ।

निम्नलिखित इसका एक उदाहरण है कि यह क्या लौटेगा:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

अपने screenWidthवेरिएबल को प्राप्त करने के लिए , बस screen.widthउसी का उपयोग करें , जिसका screenHeightआप उपयोग करेंगे screen.height।

अपनी खिड़की की चौड़ाई और ऊंचाई प्राप्त करने के लिए, यह screen.availWidthया screen.availHeightक्रमशः होगा।

के लिए pageXऔर pageYचर, उपयोग window.screenX or Y। ध्यान दें कि यह आपके LEFT / TOP-est स्क्रीन के VERY LEFT / TOP से है । इसलिए यदि आपके पास चौड़ाई की दो स्क्रीन हैं 1920तो दाईं स्क्रीन के बाईं ओर से एक विंडो 500px 2420(1920 + 500) का एक्स मान होगा । screen.width/heightहालाँकि, CURRENT स्क्रीन की चौड़ाई या ऊँचाई प्रदर्शित करते हैं।

चौड़ाई और अपने पृष्ठ की ऊंचाई प्राप्त करने के लिए, jQuery के उपयोग करने $(window).height()या $(window).width()।

फिर jQuery, उपयोग का उपयोग कर $("html").offset().topऔर $("html").offset().leftअपने लिए pageXऔर pageYमूल्यों।

Answer 17

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

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();

Comments

! स्क्रीन- ok

Answer 18

यह कैसे मैं प्रतिक्रिया जेएस परियोजना में स्क्रीन चौड़ाई प्राप्त करने में कामयाब रहा:

यदि चौड़ाई 1680 के बराबर है तो 570 वापस करें और 200 वापस करें

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth