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




jquery layout (11)

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

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

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


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

वाक्यविन्यास कुछ हद तक स्पष्ट है!

n = "<i>px</i><br>"  /* separator */
dp = devicePixelRatio /* device zoom level */
body = (() => { document.body.innerHTML = /* ready! */


       "Device zoom level: " +                         dp
+n+    "Screen width: " +                    screen.width 
*dp+n+ "Screen height: "+                   screen.height 
*dp+n+ "Document frame height: " +            innerHeight
*dp+n+ "Document frame width: " +              innerWidth                             *dp+n+ "Parent document height: "+            outerHeight                            *dp+n+ "Parent document width: "+              outerWidth                             *dp+n+ "Window available height: "+    screen.availHeight                     *dp+n+ "Window available width: "+      screen.availWidth                      *dp+n+ "Document frame max scrollable X: "+    scrollMaxX                             *dp+n+ "Document frame max scrollable Y: "+    scrollMaxY
*dp+n+ "Distance from left screen to window: "+   screenX
*dp+n+ "Distance from top screen to window: "+    screenY
*dp+n    

})()

प्रत्येक ब्राउज़र और उपकरणों में सटीक परिणाम प्राप्त करने के लिए, परिणाम PixelRatio द्वारा गुणा किया जाना चाहिए।

विंडो प्रॉपर्टी डिवाइस पिक्सेलरेटियो वर्तमान डिस्प्ले डिवाइस के लिए सीएसएस पिक्सल में रिज़ॉल्यूशन में रिज़ॉल्यूशन का अनुपात भौतिक पिक्सेल में देता है। इस मान को पिक्सेल आकार के अनुपात के रूप में भी व्याख्या किया जा सकता है: एक सीएसएस पिक्सेल का आकार एक भौतिक पिक्सेल के आकार में। सरल शब्दों में, यह ब्राउज़र को बताता है कि एकल सीएसएस पिक्सेल को आकर्षित करने के लिए स्क्रीन के वास्तविक पिक्सल का कितना उपयोग किया जाना चाहिए।

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

इस मान को बदलते समय अधिसूचित होने का कोई तरीका नहीं है (जो हो सकता है, उदाहरण के लिए, यदि उपयोगकर्ता खिड़की को एक अलग पिक्सेल घनत्व के साथ प्रदर्शित करता है)। चूंकि पिक्सेल घनत्व में परिवर्तनों का पता लगाने के लिए कोई कॉलबैक या ईवेंट उपलब्ध नहीं हैं, इसलिए ऐसा करने का एकमात्र तरीका समय-समय पर डिवाइस पिक्सेलरेटियो के मूल्य की जांच करना है कि यह बदल गया है या नहीं। बस इसे अक्सर मत करो, या आप प्रदर्शन को प्रभावित करेंगे।

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio


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

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

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


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

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

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

availWidth और availHeight - स्क्रीन पर उपलब्ध चौड़ाई और ऊंचाई (ओएस टास्कबार को छोड़कर और इस तरह)।


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

ऐसा करने के लिए, इसका उपयोग करें: window.innerWidth और window.innerHeight गुण ( w3schools.com/jsref/prop_win_innerheight.asp )।

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


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

यहां आपको एक बुकमार्कलेट 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()
)()

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


यदि आप 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;

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

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

उपयोग:

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

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

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

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

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

यह जरूरी है क्योंकि

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


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

window.innerWidth, window.innerHeight

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


शुद्ध जावास्क्रिप्ट ( w3schools.com/jsref/prop_win_innerheight.asp ) के साथ एक क्रॉस ब्राउज़र समाधान यहां है:

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

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

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




cross-browser