Các vấn đề jQuery/JS, iOS 4 và $ (tài liệu) .height()

Question

Tôi đã gặp sự cố kỳ lạ với những phiên bản khác nhau của các trình duyệt Webkit. Tôi đang cố định vị trí một phần tử ở giữa màn hình và để thực hiện các phép tính, tôi cần phải có các kích thước khác nhau, đặc biệt là chiều cao của cơ thể và chiều cao của màn hình. Trong jQuery Tôi đã sử dụng:

var bodyHeight = $('body').height(); 
var screenHeight = $(window).height(); 

trang của tôi là thường cao hơn nhiều so với khung nhìn thực tế, vì vậy khi tôi cảnh báo 'các biến, bodyHeight nên kết thúc là lớn, trong khi screenHeight nên vẫn không đổi (chiều cao của khung nhìn trình duyệt).

Điều này đúng trong - Firefox - Chrome 15 (whoa Khi đã Chrome được lên phiên bản 15!?) - Safari trên iOS5

này là không làm việc tại: - Safari trên iOS4 - Safari 5.0.4

Trên sau hai, $(window).height(); luôn trả về giá trị tương tự như $('body').height()

Suy nghĩ đó có lẽ là một vấn đề jQuery, tôi hoán đổi chiều cao cửa sổ cho window.outerHeight nhưng điều đó cũng làm điều tương tự, khiến tôi nghĩ đây thực sự là một vấn đề về webkit.

Có ai gặp phải điều này và biết cách giải quyết vấn đề này không?

Để làm phức tạp mọi thứ, tôi dường như không thể sao chép điều này một cách cô lập. Ví dụ: http://jsbin.com/omogap/3 hoạt động tốt.

Tôi đã xác định đó không phải là vấn đề về CSS, vì vậy có lẽ có một số phiên bản JS khác đang tàn phá trên trình duyệt cụ thể này mà tôi cần tìm.

Answer 1

Tôi đã chiến đấu với điều này trong một thời gian rất dài (vì bug of my plugin) và tôi đã tìm ra cách để có được chiều cao cửa sổ thích hợp trong Mobile Safari.

Tính năng này hoạt động chính xác cho dù mức thu phóng là không có subtracting height of screen with predefined height of status bars (có thể thay đổi trong tương lai). Và nó hoạt động với chế độ toàn màn hình iOS6.

Một số xét nghiệm (trên iPhone với kích thước màn hình 320x480, trong chế độ phong cảnh):

// Returns height of the screen including all toolbars 
// Requires detection of orientation. (320px for our test) 
window.orientation === 0 ? screen.height : screen.width 


// Returns height of the visible area 
// It decreases if you zoom in 
window.innerHeight 


// Returns height of screen minus all toolbars 
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not 
// In fullscreen mode it always returns 320px. 
// Doesn't change when zoom level is changed. 
document.documentElement.clientHeight 

Sau đây là cách chiều cao được phát hiện:

var getIOSWindowHeight = function() { 
    // Get zoom level of mobile Safari 
    // Note, that such zoom detection might not work correctly in other browsers 
    // We use width, instead of height, because there are no vertical toolbars :) 
    var zoomLevel = document.documentElement.clientWidth/window.innerWidth; 

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height. 
    return window.innerHeight * zoomLevel; 
}; 

// You can also get height of the toolbars that are currently displayed 
var getHeightOfIOSToolbars = function() { 
    var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight(); 
    return tH > 1 ? tH : 0; 
}; 

kỹ thuật như vậy chỉ có một con: nó không phải là điểm ảnh hoàn hảo khi trang được phóng to (vì window.innerHeight luôn trả về giá trị được làm tròn). Nó cũng trả về giá trị không chính xác khi bạn phóng to gần thanh trên cùng.

Một năm trôi qua kể từ khi bạn đặt câu hỏi này, nhưng dù sao hy vọng điều này sẽ hữu ích! :)

Answer 2

Tôi gặp sự cố tương tự.Nó phải làm gì với 2 điều:

Box-kích thước tài sản CSS3: Trong .height() jQuery documentation Tôi thấy điều này:

Lưu ý rằng .height() sẽ luôn luôn trở về chiều cao nội dung, không phụ thuộc vào giá trị của thuộc tính kích thước hộp CSS. Kể từ jQuery 1.8, điều này có thể yêu cầu truy xuất thuộc tính kích thước hộp cộng với chiều cao CSS và sau đó trừ bất kỳ đường viền và phần đệm tiềm năng nào trên mỗi phần tử khi phần tử có kích thước hộp: border-box. Để tránh hình phạt này, hãy sử dụng .css ("height") thay vì .height().

Điều này có thể áp dụng cho $('body').height().

tài liệu sẵn sàng vs Window.load

$(document).ready() được chạy khi DOM đã sẵn sàng cho JS nhưng nó có thể là hình ảnh chưa tải xong được nêu ra. Sử dụng $(window).load() đã khắc phục sự cố của tôi. Read more.

Tôi hy vọng điều này sẽ hữu ích.

Answer 3

Một giải pháp trình duyệt chéo được thiết lập rằng bằng jQuery

Sử dụng thuộc tính này: $(window).height()

này trả về giá trị int đại diện cho kích thước của chiều cao màn hình hiển thị của trình duyệt bằng pixel.

Answer 4

Hãy thử điều này:

var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height() 

Answer 5

Đó là năm 2015, chúng ta đang ở iOS 8 bây giờ. iOS 9 đã ở gần góc. Và vấn đề vẫn còn với chúng tôi. Thở dài.

Tôi đã triển khai giải pháp trình duyệt chéo cho kích thước cửa sổ trong jQuery.documentSize. Nó vẫn rõ ràng của bất kỳ loại trình duyệt sniffing và đã được nhiều đơn vị thử nghiệm. Dưới đây là cách hoạt động:

• Gọi $.windowHeight() với chiều cao visual viewport. Đó là chiều cao của khu vực bạn thực sự thấy trong chế độ xem ở mức thu phóng hiện tại, bằng pixel CSS.
• Gọi $.windowHeight({ viewport: "layout" }) cho chiều cao của layout viewport. Đó là chiều cao mà khu vực hiển thị sẽ có lúc zoom 1: 1 - chiều cao cửa sổ ban đầu ".

Chỉ cần chọn chế độ xem phù hợp cho công việc của bạn và bạn đã hoàn tất.

Phía sau hậu trường, phép tính gần đúng theo quy trình được nêu trong answer by @DmitrySemenov. Tôi đã viết về các bước liên quan đến elsewhere on SO. Kiểm tra xem nếu bạn quan tâm, hoặc có một cái nhìn tại source code.