ฉันจะได้รับwindowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYซึ่งจะทำงานในเบราว์เซอร์ที่สำคัญทั้งหมด?

คุณสามารถรับขนาดของหน้าต่างหรือเอกสารด้วย 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;

สิ่งนี้มีทุกสิ่งที่คุณจำเป็นต้องรู้: รับวิวพอร์ต / ขนาดหน้าต่าง

แต่ในระยะสั้น:

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

นี่คือโซลูชันข้ามเบราว์เซอร์ที่มีJavaScriptบริสุทธิ์( ที่มา ):

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_cssom.html#t10 :

availWidthและavailHeight - ความกว้างและความสูงที่มีอยู่บนหน้าจอ (ไม่รวมแถบงาน OS และอื่น ๆ )

แต่เมื่อเราพูดถึงหน้าจอที่ตอบสนองได้และถ้าเราต้องการจัดการโดยใช้ jQuery ด้วยเหตุผลบางอย่าง

window.innerWidth, window.innerHeight

ให้การวัดที่ถูกต้อง แม้ว่ามันจะลบพื้นที่พิเศษของแถบเลื่อนและเราไม่จำเป็นต้องกังวลเกี่ยวกับการปรับพื้นที่นั้น :)

คุณยังสามารถรับความกว้างและความสูงของ WINDOW ได้โดยหลีกเลี่ยงแถบเครื่องมือของเบราว์เซอร์และสิ่งอื่น ๆ มันเป็นพื้นที่ใช้สอยจริงในหน้าต่างเบราว์เซอร์

หากต้องการทำสิ่งนี้ให้ใช้: window.innerWidth และ window.innerHeightคุณสมบัติ ( ดูเอกสารที่ w3schools )

ในกรณีส่วนใหญ่มันจะเป็นวิธีที่ดีที่สุดเช่นในการแสดงกล่องโต้ตอบลอยโมดัลกึ่งกลางอย่างสมบูรณ์ มันช่วยให้คุณสามารถคำนวณตำแหน่งบนหน้าต่างได้ไม่ว่าจะใช้การวางแนวความละเอียดหรือขนาดหน้าต่างใดก็ตาม

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

เพื่อตรวจสอบความสูงและความกว้างของหน้าโหลดของคุณในปัจจุบันของเว็บไซต์ใด ๆ โดยใช้"คอนโซล"หรือหลังจากคลิก"ตรวจสอบ"

ขั้นตอนที่ 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และpageHeightในภาพ) คุณอาจต้องการพิจารณาใช้ปลั๊กอินของฉันjQuery.documentSize

แต่ก็มีเพียงหนึ่งวัตถุประสงค์: เสมอกลับขนาดของเอกสารที่ถูกต้องแม้จะอยู่ในสถานการณ์เมื่อ jQuery และวิธีการอื่น ๆล้มเหลว อย่างไรก็ตามชื่อของมันที่คุณไม่จำเป็นต้องใช้ jQuery - มันถูกเขียนในวานิลลา Javascript และผลงานโดยไม่ต้อง jQueryเกินไป

การใช้งาน:

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

documentสำหรับทั่วโลก สำหรับเอกสารอื่น ๆ เช่นใน iframe แบบฝังที่คุณสามารถเข้าถึงได้ให้ส่งเอกสารเป็นพารามิเตอร์:

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()ซึ่งแก้ปัญหาเหล่านี้ สำหรับข้อมูลเพิ่มเติมโปรดตรวจสอบเอกสาร

ฉันเขียน javascript bookmarklet ขนาดเล็กที่คุณสามารถใช้เพื่อแสดงขนาด คุณสามารถเพิ่มลงในเบราว์เซอร์ของคุณได้อย่างง่ายดายและเมื่อใดก็ตามที่คุณคลิกคุณจะเห็นขนาดที่มุมด้านขวาของหน้าต่างเบราว์เซอร์ของคุณ

ที่นี่คุณจะพบข้อมูลวิธีใช้ bookmarklet https://en.wikipedia.org/wiki/Bookmarklet

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 ขนาดเล็กซึ่งจะอัปเดตเมื่อคุณปรับขนาดหน้าต่าง

ในบางกรณีที่เกี่ยวข้องกับเค้าโครงตอบสนอง$(document).height()สามารถส่งคืนข้อมูลที่ไม่ถูกต้องซึ่งแสดงความสูงของพอร์ตการดูเท่านั้น ตัวอย่างเช่นเมื่อ div # wrapper บางส่วนมีความสูง: 100% #wrapper นั้นสามารถยืดได้โดยบล็อกบางส่วนที่อยู่ภายใน แต่ความสูงของมันจะยังคงเหมือนความสูงของวิวพอร์ต ในสถานการณ์เช่นนี้คุณอาจใช้

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

นั่นหมายถึงขนาดของเสื้อคลุมที่แท้จริง

คู่มือฉบับสมบูรณ์ที่เกี่ยวข้องกับขนาดหน้าจอ

JavaScript

สำหรับความสูง:

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.)

หมายเหตุ: เมื่อหน้าต่างขยายใหญ่สุดนี่จะเท่ากับหน้าจอavailHeight

สำหรับความกว้าง:

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

ฉันพัฒนาห้องสมุดสำหรับการรู้ขนาดวิวพอร์ตที่แท้จริงสำหรับเดสก์ท็อปและเบราว์เซอร์มือถือเนื่องจากขนาดวิวพอร์ตนั้นไม่สอดคล้องกันในอุปกรณ์และไม่สามารถพึ่งพาคำตอบทั้งหมดของโพสต์นั้น (ตามการวิจัยทั้งหมดที่ฉันทำ): https: // github .com / pyrsmk / W

บางครั้งคุณต้องเห็นการเปลี่ยนแปลงความกว้าง / ความสูงในขณะที่ปรับขนาดหน้าต่างและเนื้อหาภายใน

เพื่อที่ฉันได้เขียนสคริปต์เล็กน้อยที่เพิ่มกล่องบันทึกที่ตรวจสอบการปรับขนาดและการปรับปรุงเกือบทั้งหมดแบบไดนามิก

เพิ่ม HTML ที่ถูกต้องพร้อมตำแหน่งคงที่และดัชนี z สูง แต่เล็กพอคุณจึงสามารถ :

• ใช้บนเว็บไซต์จริง
• ใช้สำหรับทดสอบ มุมมองอุปกรณ์เคลื่อนที่ / ตอบสนอง

ทดสอบแล้ว: 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 ฟรี :)

ด้วยการแนะนำ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)

คุณสามารถใช้วัตถุหน้าจอเพื่อรับสิ่งนี้

ต่อไปนี้เป็นตัวอย่างของสิ่งที่จะส่งคืน:

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

ที่จะได้รับของscreenWidthตัวแปรเพียงแค่การใช้งานscreen.widthเช่นเดียวกับคุณจะเป็นเพียงแค่การใช้งานscreenHeightscreen.height

เพื่อให้ได้ความกว้างและความสูงของหน้าต่างมันจะเป็นscreen.availWidthหรือscreen.availHeightตามลำดับ

สำหรับpageXและตัวแปรการใช้งานpageY window.screenX or Yโปรดทราบว่านี่คือจากซ้าย / บนสุดของหน้าจอซ้าย /บนสุดของคุณ ดังนั้นหากคุณมีความกว้างสองหน้าจอ1920หน้าต่าง 500px จากด้านซ้ายของหน้าจอด้านขวาจะมีค่า X เท่ากับ2420(1920 + 500) screen.width/heightอย่างไรก็ตามแสดงความกว้างหรือความสูงของหน้าจอปัจจุบัน

เพื่อให้ได้ความกว้างและความสูงของหน้าของคุณให้ใช้ของ jQuery หรือ$(window).height()$(window).width()

ใช้ jQuery อีกครั้งใช้$("html").offset().topและ$("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();
})();

นี่เป็นวิธีที่ฉันจัดการเพื่อให้ได้ความกว้างของหน้าจอใน React JS Project:

หากความกว้างเท่ากับ 1680 ให้ส่งคืน 570 และส่งคืนค่า 200

var screenWidth = window.screen.availWidth;

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

Screen.availWidth