Làm thế nào tôi có thể nhận được windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYmà sẽ làm việc trong tất cả các trình duyệt chính?

Bạn có thể lấy kích thước của cửa sổ hoặc tài liệu bằng jQuery:

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

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

Đối với kích thước màn hình, bạn có thể sử dụng screenđối tượng:

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

Điều này có mọi thứ bạn cần biết: Nhận kích thước khung nhìn / cửa sổ

nhưng tóm lại:

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

Vĩ cầm

Hãy dừng chỉnh sửa câu trả lời này. Bây giờ nó đã được chỉnh sửa 22 lần bởi những người khác nhau để phù hợp với sở thích định dạng mã của họ. Điều này cũng được chỉ ra rằng điều này là không bắt buộc nếu bạn chỉ muốn nhắm mục tiêu các trình duyệt hiện đại - nếu vậy bạn chỉ cần những điều sau đây:

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

console.log(width, height);

Đây là một giải pháp trình duyệt chéo với JavaScript thuần ( Nguồn ):

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

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

Một cách không phải jQuery để có được kích thước màn hình có sẵn. window.screen.width/heightđã được đưa lên, nhưng vì webdesign đáp ứng và hoàn thiện vì tôi nghĩ rằng đáng để đề cập đến các thuộc tính đó:

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

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

availWidth và availHeight - Chiều rộng và chiều cao có sẵn trên màn hình (không bao gồm các thanh tác vụ của hệ điều hành, v.v.).

Nhưng khi chúng ta nói về màn hình đáp ứng và nếu chúng ta muốn xử lý nó bằng jQuery vì một số lý do,

window.innerWidth, window.innerHeight

đưa ra phép đo chính xác. Thậm chí, nó còn loại bỏ không gian thừa của thanh cuộn và chúng ta không cần phải lo lắng về việc điều chỉnh không gian đó :)

Bạn cũng có thể lấy chiều rộng và chiều cao của WINDOW, tránh các thanh công cụ của trình duyệt và các thứ khác. Đây là khu vực có thể sử dụng thực sự trong cửa sổ trình duyệt .

Để thực hiện việc này, hãy sử dụng: window.innerWidth và window.innerHeightcác thuộc tính ( xem tài liệu tại w3schools ).

Trong hầu hết các trường hợp, đó sẽ là cách tốt nhất, ví dụ, để hiển thị một hộp thoại phương thức nổi tập trung hoàn hảo. Nó cho phép bạn tính toán các vị trí trên cửa sổ, bất kể định hướng độ phân giải hoặc kích thước cửa sổ đang sử dụng trình duyệt.

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

Để kiểm tra chiều cao và chiều rộng của trang được tải hiện tại của bạn trên bất kỳ trang web nào bằng cách sử dụng "bảng điều khiển" hoặc sau khi nhấp vào "Kiểm tra" .

bước 1 : Nhấp vào nút chuột phải và nhấp vào 'Kiểm tra' và sau đó nhấp vào 'bảng điều khiển'

bước 2 : Đảm bảo rằng màn hình trình duyệt của bạn không ở chế độ 'tối đa hóa'. Nếu màn hình trình duyệt ở chế độ 'tối đa hóa', trước tiên bạn cần nhấp vào nút tối đa hóa (hiện ở góc trên bên phải hoặc bên trái) và hủy tối đa hóa nó.

Bước 3 : Bây giờ, hãy viết như sau sau dấu lớn hơn ('>') tức là

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

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

Nếu bạn cần một giải pháp chống đạn thực sự cho chiều rộng và chiều cao của tài liệu ( pageWidthvà pageHeighttrong ảnh), bạn có thể muốn xem xét sử dụng một plugin của tôi, jQuery.documentSize .

Nó chỉ có một mục đích: luôn trả về kích thước tài liệu chính xác, ngay cả trong các tình huống khi jQuery và các phương thức khác không thành công . Mặc dù tên của nó, bạn không nhất thiết phải sử dụng jQuery - nó được viết bằng vanilla Javascript và cũng hoạt động mà không cần jQuery .

Sử dụng:

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

cho toàn cầu document. Đối với các tài liệu khác, ví dụ: trong iframe nhúng mà bạn có quyền truy cập, hãy chuyển tài liệu dưới dạng tham số:

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

Cập nhật: bây giờ cho kích thước cửa sổ, quá

Kể từ phiên bản 1.1.0, jQuery.documentSize cũng xử lý các kích thước cửa sổ.

Điều đó là cần thiết bởi vì

• $( window ).height()là lỗi trong iOS , đến mức vô dụng
• $( window ).width()và $( window ).height()là không đáng tin cậy trên điện thoại di động vì họ không xử lý những ảnh hưởng của phóng to di động.

jQuery.documentSize cung cấp $.windowWidth()và $.windowHeight(), giải quyết những vấn đề này. Để biết thêm, xin vui lòng kiểm tra các tài liệu .

Tôi đã viết một bookmarklet javascript nhỏ mà bạn có thể sử dụng để hiển thị kích thước. Bạn có thể dễ dàng thêm nó vào trình duyệt của mình và bất cứ khi nào bạn nhấp vào nó, bạn sẽ thấy kích thước ở góc bên phải của cửa sổ trình duyệt của bạn.

Tại đây bạn tìm thấy thông tin về cách sử dụng 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);

Mã gốc

Mã ban đầu là trong cà phê:

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

Về cơ bản mã đang chuẩn bị một div nhỏ cập nhật khi bạn thay đổi kích thước cửa sổ của mình.

Trong một số trường hợp liên quan đến bố cục đáp ứng $(document).height()có thể trả về dữ liệu sai chỉ hiển thị chiều cao cổng xem. Ví dụ: khi một số trình bao bọc div # có chiều cao: 100%, #wrapper đó có thể được kéo dài bởi một số khối bên trong nó. Nhưng chiều cao của nó vẫn sẽ giống như chiều cao khung nhìn. Trong tình huống như vậy bạn có thể sử dụng

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

Điều đó thể hiện kích thước thực tế của bọc.

Hướng dẫn đầy đủ liên quan đến kích thước màn hình

JavaScript

Đối với chiều cao:

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

Lưu ý: Khi cửa sổ được tối đa hóa, điều này sẽ bằng screen.availHeight

Đối với chiều rộng:

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

Đối với chiều cao:

$(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.                         

Đối với chiều rộng:

$(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)

Tham khảo: https://help.optimizely.com/Build_Campaigns_and_Experiment/Use_screen_measurements_to_design_for_responsive_breakpoint

Tôi đã phát triển một thư viện để biết kích thước khung nhìn thực cho máy tính để bàn và trình duyệt điện thoại di động, bởi vì kích thước khung nhìn không nhất quán trên các thiết bị và không thể dựa vào tất cả các câu trả lời của bài đăng đó (theo tất cả các nghiên cứu tôi đã thực hiện về điều này): https: // github .com / pyrsmk / W

Đôi khi bạn cần xem sự thay đổi chiều rộng / chiều cao trong khi thay đổi kích thước cửa sổ và nội dung bên trong.

Vì vậy, tôi đã viết một đoạn script nhỏ có thêm hộp nhật ký theo dõi động tất cả các cập nhật thay đổi kích thước và gần như ngay lập tức.

Nó thêm một HTML hợp lệ với vị trí cố định và chỉ số z cao, nhưng đủ nhỏ, vì vậy bạn có thể :

• sử dụng nó trên một trang web thực tế
• sử dụng nó để kiểm tra quan điểm di động / đáp ứng

Đã thử nghiệm trên: Chrome 40, IE11, nhưng rất có thể hoạt động trên các trình duyệt khác / cũ hơn ... :)

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

EDIT: Bây giờ các kiểu chỉ được áp dụng cho phần tử bảng logger - không phải cho tất cả các bảng - đây cũng là một giải pháp không có jQuery :)

Với việc giới thiệu globalThistrong ES2020, bạn có thể sử dụng các thuộc tính như thế nào.

Đối với kích thước màn hình:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Đối với kích thước cửa sổ

globalThis.outerWidth
globalThis.outerHeight

Đối với Offset:

globalThis.pageXOffset
globalThis.pageYOffset

...& Sớm.

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

Bạn có thể sử dụng màn hình đối tượng để có được điều này.

Sau đây là một ví dụ về những gì nó sẽ trả lại:

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

Để có được screenWidthbiến của bạn , chỉ cần sử dụng screen.width, cùng với screenHeight, bạn sẽ chỉ sử dụng screen.height.

Để có được chiều rộng và chiều cao cửa sổ của bạn, nó sẽ screen.availWidthhoặc screen.availHeighttương ứng.

Đối với các biến pageXvà pageYsử dụng window.screenX or Y. Lưu ý rằng đây là từ RẤT NHIỀU / HÀNG ĐẦU CỦA MÀN HÌNH / MÀN HÌNH HÀNG ĐẦU CỦA BẠN . Vì vậy, nếu bạn có hai màn hình chiều rộng 1920thì một cửa sổ 500px từ bên trái màn hình bên phải sẽ có giá trị X là 2420(1920 + 500). screen.width/heighttuy nhiên, hiển thị chiều rộng hoặc chiều cao của màn hình HIỆN TẠI.

Để có được chiều rộng và chiều cao của trang của bạn, hãy sử dụng jQuery $(window).height()hoặc $(window).width().

Một lần nữa sử dụng jQuery, sử dụng $("html").offset().topvà $("html").offset().leftcho pageXvà pageYgiá trị của bạn .

đây là giải pháp của tôi

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

Đây là cách tôi quản lý để có được chiều rộng màn hình trong Dự án React JS:

Nếu chiều rộng bằng 1680 thì trả về 570 khác trả về 200

var screenWidth = window.screen.availWidth;

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

Screen.availWidth