Câu hỏi Nhận kích thước của màn hình, trang web hiện tại và cửa sổ trình duyệt


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

screenshot describing which values are wanted


1608
2017-08-09 06:28


gốc


Nice pic. Tất cả các câu hỏi nên và câu trả lời nên được như thế này. - Damien Golding
pageHeight (trên một pic) u có thể nhận được với: document.body.scrollHeight - befzz
xem https://developer.mozilla.org/en-US/docs/Web/API/Window.screen và http://www.quirksmode.org/dom/w3c_cssom.html#screenview - rawiro
Hấp dẫn: ryanve.com/lab/dimensions - Ring Ø
Hướng dẫn hữu ích - w3schools.com/jsref/prop_win_innerheight.asp - Uncle Iroh


Các câu trả lời:


Nếu bạn đang sử dụng jQuery, bạn có thể nhận được kích thước của cửa sổ hoặc tài liệu bằng cách sử dụng các phương thức 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)

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

screen.height;
screen.width;

1142
2017-08-09 06:39



cảm ơn, và có cách nào để có được pageX, pageY, screenX, screenY? - turtledove
Chiều cao của phương thức jQuery () dường như hoạt động với tất cả các phần tử và trả về một số (46) thay vì một chuỗi như css ('height') ("46px"). - Chris
Khi giao dịch với Safari trên thiết bị di động, thật đáng buồn jQuery không phải là giải pháp hoàn hảo cho câu hỏi này. Xem ghi chú trên dòng số 13 tại github.com/jquery/jquery/blob/master/src/dimensions.js - Joshua
@ 웃 웃웃 웃웃 bạn đã chỉnh sửa gì trong câu trả lời? theo các bản sửa đổi, bạn không chỉnh sửa gì cả - DanFromGermany
@Marco Kerwitz Điều tồi tệ nhất là tôi đã nhập "javascript get window width" và nội dung của câu trả lời này là trên Google. Một lớn trừ một từ tôi. - Maciej Krawczyk


Đây là tất cả những gì bạn cần biết:

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

nhưng trong ngắn hạn:

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

Vĩ cầm


816
2017-07-31 15:52



Tại sao không g = document.body ? - a paid nerd
@apaidnerd: Tiêu chuẩn bất chấp các trình duyệt như IE8 không hỗ trợ document.body. IE9, tuy nhiên, không. - Michael Mikowski
@MichaelMikowski Điều đó không đúng! Ngay cả hỗ trợ IE5 document.body. - Nux
@nux tôi đứng sửa chữa, và tôi đã xác nhận hỗ trợ trong IE8. Tôi biết rằng mặc dù ít nhất một brower chúng tôi đã nhắm mục tiêu gần đây đã không hỗ trợ document.body và chúng tôi đã phải thay đổi để sử dụng phương pháp getElementsByTagName. Nhưng tôi đoán tôi đã nhầm lẫn trình duyệt. Lấy làm tiếc! - Michael Mikowski
Nó không phải là ngắn, nó không có lời giải thích. Không có hành vi phạm tội tôi chỉ không thể truy cập vào trang web tại thời điểm này. - Adi Prasetyo


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

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

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

367
2018-01-30 17:44



Điều này là tốt hơn bởi vì nếu bạn có thể gọi kịch bản đủ sớm trong quá trình tải (thường là ý tưởng), thì body element sẽ trả về một giá trị undefined như dom chưa được tải. - dgo
HA! Chủ đề cũ nhưng cảm ơn cho điều đó! Tôi đoán tôi là một trong những "kẻ ngốc" cũ cố gắng hỗ trợ ít nhất là quay trở lại IE8 khi có thể, vì lợi ích của số lượng người dùng gia đình lớn tuổi đáng ngạc nhiên sẽ không bao giờ ngừng sử dụng XP cho đến khi máy của họ bị cháy. Tôi cảm thấy mệt mỏi khi đặt câu hỏi và thay vì nhận được câu trả lời, hãy bỏ phiếu xuống chỉ với "STOP HPORT TRỢ IE8 !!" làm nhận xét. Một lần nữa cám ơn! Điều này giải quyết được một vấn đề cho tôi trong một bức ảnh javascript tinh khiết zoom tôi đã làm. Một chút chậm của nó trên IE8, nhưng bây giờ ít nhất nó hoạt động !!! :-) - Randy


Một cách không jQuery để có được kích thước màn hình có sẵn. window.screen.width/height đã được đưa lên, nhưng đối với webdesign đáp ứng và đầy đủ vì tôi nghĩ rằng giá trị của nó phải đề 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 thanh tác vụ của hệ điều hành và như vậy).


77
2018-06-20 10:06



giống như màn hình chiều rộng.height - trên trình duyệt chrome cho android chia cho tỷ lệ pixel :( - Darius.V
window.screen.availHeight dường như giả định chế độ toàn màn hình để chế độ màn hình bình thường buộc cuộn (được thử nghiệm trong Firefox và Chrome). - Suzana
@Suzana_K sau đó sử dụng window.screen.height thay thế. - Vallentin


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 cách sử dụng jQuery vì một lý do nào đó,

window.innerWidth, window.innerHeight

cho 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 tôi không cần phải lo lắng về việc điều chỉnh khoảng trống đó :)


48
2018-04-22 07:29



Đây sẽ là câu trả lời được chấp nhận với vô số upvotes. Một câu trả lời hữu ích hơn nhiều so với câu trả lời hiện được chấp nhận, và nó cũng không phụ thuộc vào jQuery. - developerbmw
Không may, window.innerWidth và window.innerHeight không lấy kích thước của thanh cuộn vào tài khoản. Nếu có các thanh cuộn, các phương thức này trả về kết quả sai cho kích thước cửa sổ trong gần như tất cả các trình duyệt trên máy tính để bàn. Xem stackoverflow.com/a/31655549/508355 - hashchange


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

17
2018-02-11 04:25





Bạn cũng có thể lấy chiều rộng và chiều cao của WINDOW, tránh thanh công cụ của trình duyệt và các thứ khác. Nó là vùng có thể sử dụng thực 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.innerHeight tính chất (xem doc tại w3schools).

Trong hầu hết các trường hợp, nó sẽ là cách tốt nhất, ví dụ, để hiển thị một hộp thoại nổi phương thức hoàn toàn trung tâm. 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ổ nào đang sử dụng trình duyệt.


15
2017-08-21 10:44



Điều này không được hỗ trợ trong ie8 và ie7, theo w3schools. Ngoài ra, bạn phải xem ra khi bạn liên kết với w3schools. Xem meta.stackexchange.com/questions/87678/… - thecarpy


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

bước 1: Nhấp vào nút bên phải của chuột 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 đang ở chế độ 'tối đa hóa', trước tiên bạn cần nhấp vào nút phóng to (hiện tại ở góc trên bên phải hoặc bên trái) và bỏ tối đa hóa nó.

bước 3: Bây giờ, hãy viết phần 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)

12
2017-07-09 04:22



Tại sao đây không phải là câu trả lời được chọn? - Iulian Onofrei
@IulianOnofrei bởi vì nó không trả lời đầy đủ các câu hỏi ban đầu. Trò đùa, đó là câu trả lời đúng cho tôi. - rob
innerWidth và innerHeight chỉ chính xác nếu tỷ lệ khung nhìn là 1. Đây là mặc định, nhưng nó có thể vô tình thay đổi bằng cách sử dụng biến đổi css. - Victor Stoddard
"window.innerWidth" thay vì "screen.width" đã hoạt động để tôi xác định kích thước trình duyệt của người dùng - cảm ơn bạn! - Kevin Pajak


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 ( pageWidth và pageHeight trong hình), bạn có thể cân nhắc việc sử dụng plugin của tôi, jQuery.documentSize.

Nó chỉ có một mục đích: để luôn luôn trả về kích thước tài liệu chính xác, ngay cả trong các kịch bản khi jQuery và các phương thức khác Thất bại. 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 vani Javascript và hoạt động mà không cần jQuery, quá.

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 được nhúng mà bạn có quyền truy cập, 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 vì

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


8
2018-03-04 22:30



VM2859: 1 Uncaught DOMException: Đã chặn một khung có nguồn gốc "localhost: 12999 "; từ việc truy cập một khung hình có nguồn gốc chéo (…) có cách nào để vượt qua điều này không ??? - fizmhd
Bạn không thể truy cập iframe từ một miền khác, nó vi phạm chính sách cùng nguồn gốc. Kiểm tra câu trả lời này. - hashchange