दिलचस्प पोस्ट
आप टेक्स्टरिए में कर्सर की स्थिति कैसे प्राप्त करते हैं? कैसे printf uint64_t? इसके साथ विफल रहता है: "नकली अनुगामी '% प्रारूप में" गैर-अच्छी तरह से बनाए गए HTML को DomDocument (PHP) द्वारा लोड करते समय सावधानियां अक्षम करें जहां सी में संग्रहीत स्थिर चर हैं? IPhone सिम्युलेटर को साफ करना किसी दिए गए तिथि के लिए वीएसएस से सभी फाइलें प्राप्त करें? एक डेवलपमेंट LAMP सर्वर पर PHP 5.x के कई संस्करण कैसे चला सकते हैं? पायथन सेलेनियम अलर्ट – प्रॉम्प्ट उपयोगकर्ता नाम और पासवर्ड काम नहीं कर रहा है शीर्ष एक्शनबार पर एंड्रॉइड नेविगेशन ड्रॉवर जावा के साथ WMI का उपयोग करने के लिए अनुशंसित पुस्तकालय / तरीके मैन्टिसा और एक्सपोनेंट को डबल में सी # SQL "IN" स्टेटमेंट के लिनक संस्करण एक्स 86 विधानसभा में "एम्फ़ ईएसपी, ईबीपी" क्यों छोड़ता है? जावा का + =, – =, * =, / = यौगिक असाइनमेंट ऑपरेटर्स paintComponent मेरे चित्र के शीर्ष पर अन्य घटकों को खींचता है

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

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

स्क्रीनशॉट का वर्णन करता है कि कौन सा मान चाहते हैं

Solutions Collecting From Web of "स्क्रीन के आकार, वर्तमान वेब पेज और ब्राउज़र विंडो को प्राप्त करें"

यदि आप jQuery का उपयोग कर रहे हैं, तो आप खिड़की के आकार या jQuery के तरीकों का उपयोग कर दस्तावेज़ प्राप्त कर सकते हैं:

 $(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document (same as pageHeight in screenshot) $(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document (same as pageWidth in screenshot) 

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

 screen.height; screen.width; 

यह सब कुछ आपको जानने की आवश्यकता है:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

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

 var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w.innerHeight|| e.clientHeight|| g.clientHeight; alert(x + ' × ' + y); 

बेला

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

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

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

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

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

availwidth और availHight – स्क्रीन पर उपलब्ध चौड़ाई और ऊंचाई (ओएस टास्कबार और इस तरह के)।

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

 window.innerWidth, window.innerHeight 

सही माप देता है यहां तक ​​कि यह स्क्रॉल बार के अतिरिक्त स्थान को निकाल देता है और हमें उस स्थान को समायोजित करने की चिंता करने की ज़रूरत नहीं है 🙂

 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>'); 

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

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

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

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

चरण 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) 

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

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

उपयोग:

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

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

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

अपडेट: अब विंडो आयाम के लिए भी

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

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

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

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

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

यहां आपको जानकारी मिलती है कि बुकमार्कलेट का उपयोग कैसे करें 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() )() 

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

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

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

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

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

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

पर जांच: क्रोम 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-मुक्त समाधान है 🙂

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

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

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

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

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

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

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

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

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

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

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

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

 // 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(); })();