2012-05-13 34 views
16

Tôi đang cố gắng để có được chiều cao trình duyệt khung nhìn hiện tại, sử dụng

$(window).on('resize',function() { 
    console.log("new height is: "+$(window).height()); 
}); 

Nhưng tôi nhận được giá trị mà là cách quá thấp. Khi chế độ xem cao khoảng 850px, tôi nhận được các giá trị khoảng 350 hoặc 400px so với chiều cao(). Chuyện gì thế?

Ví dụ: http://jsfiddle.net/forgetcolor/SVqx9/

+3

Để làm rõ - bạn đang nhận được những lỗi _in jsFiddle_ hoặc trong ngữ cảnh trình duyệt bình thường? jsFiddle sử dụng một iFrame, vì vậy cửa sổ sẽ không phải là toàn bộ cửa sổ của bạn, chỉ là khung nhỏ hơn. – nrabinowitz

+0

trong trình duyệt thông thường, không phải là khung nội tuyến. – mix

+0

Bạn sẽ cần một ví dụ không phải là jsFiddle, sau đó - jsFiddle sẽ luôn cung cấp cho bạn số điện thoại xấu ở đây. – nrabinowitz

Trả lời

9

Một lý do có thể là bạn đang kiểm tra bảng điều khiển bằng firebug/cái gì khác. Vì vậy, bạn không nhận được chiều cao cửa sổ chính xác do chiều cao firebug.

Bạn có thể thử một cái gì đó như thế này:

mất một khoảng/div trong bạn tài liệu:

<span id="res"></span> 

và sau đó

$(window).on('resize',function() { 
    $('#res').html("new height is: "+$(window).height()); 
}); 

Hoặc nếu bạn muốn kiểm tra đặt trên firebug giao diện điều khiển sau đó tách nó khỏi trình duyệt và sau đó kiểm tra kết quả.

+0

Và đây là một mẹo rất hay. Tôi gặp sự cố này trong Chrome khi cửa sổ Nhà phát triển mở. –

2

Không repro. Hãy nhớ rằng chiều cao cửa sổ bị giảm bởi các mục trong chrome của trình duyệt, chẳng hạn như thanh địa chỉ, công cụ nhà phát triển, thanh công cụ dấu trang và hơn thế nữa. Phần sau xuất hiện để hiển thị chính xác chiều cao khung nhìn:

jsbin sẽ cung cấp cho bạn ước tính khá cao về chiều cao cửa sổ, vì nó không giới hạn đầu ra mã của bạn thành khung nội tuyến nhỏ như các trang web kiểm tra khác như jsfiddle.

http://jsbin.com/otaqej/edit#javascript,html

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js"></script> 
    </head> 
    <body> 
    <div id="message">Height: 0</div> 
    <script> 
     $(window).on("resize", function(){ 
     $("#message").html("Height: " + $(window).height()); 
     }); 
    </script> 
    </body> 
</html> 
+0

Có lý do nào đằng sau jsbin không hoạt động trong IE9 không? Tuy nhiên nó hoạt động tốt trong Firefox. – Hoque

+0

@Hoque Remy Sharp, tác giả của JSBin, đã thử nghiệm nó rộng rãi trong các phiên bản sau của IE. Nếu bạn có bất kỳ vấn đề với nó mà bạn có thể chi tiết cụ thể, xin vui lòng cho anh ta biết trên twitter: [@rem] (https://twitter.com/#!/rem). – Sampson

1

JSFiddle hoạt động bằng cách tạo ra một đó được nạp tự động sau khi bạn làm cho mã.

JavaScript của bạn đang tính chiều cao của cửa sổ, điều này xảy ra ở chiều cao của , cao khoảng 400px đối với tôi.

Mã của bạn đang thực hiện những gì cần làm.

30

Tôi đã gặp vấn đề tương tự trong Firefox rồi tôi thêm <!DOCTYPE HTML> vào chỉ mục của mình và nó hoạt động.

Nguồn: http://viralpatel.net/blogs/jquery-window-height-incorrect/

+8

Bạn thưa ông đã cứu ngày của tôi: D! – Kaz

+0

Đây cũng là trường hợp bạn đã khai báo loại tài liệu sau này trong tài liệu, nó xuất hiện khi chúng tôi thêm thẻ meta CSRF vào các trang của chúng tôi và $ (cửa sổ) .height() trả về một giá trị sai được chèn trước khi khai báo kiểu doctype . –

+0

Oh người đàn ông .. Lưu ngày của tôi ở đây quá! Tất cả mọi thứ đã được .. Vì vậy, hoàn toàn khác nhau khi tôi đẩy đến env dàn của tôi, tôi đã thực sự lo lắng. –

2

Đối với những người vẫn còn có vấn đề sau khi giải pháp trên ...

Vui lòng kiểm tra tỷ lệ điểm của trình duyệt lên project.html của bạn ..

Giá trị của $ (cửa sổ) .height() không giống như pixel 'thực' của khu vực khách hàng khi tỉ lệ xem được điều chỉnh! (và để những người khác $ (xx) .width() ... trong tình huống này)

(Trình duyệt nhớ bất cẩn 110% tỷ lệ của tôi điều chỉnh ngày trước ...)

+0

cũng xem trả lời của ozzysong [link] (http://stackoverflow.com/a/23320757/233545) trong cùng một vấn đề khác –

Các vấn đề liên quan