Tôi có thể truy vấn chiều cao cửa sổ Safari không có URL trên thanh công cụ theo cách nền tảng trung lập không?

Question

Tôi đang viết một tiện ích trình đọc văn bản nhỏ bên cạnh tương tự như những gì bạn nhận được trong cửa hàng ứng dụng iPhone nơi bảng điều khiển ảnh chụp màn hình cho ứng dụng là bảng điều khiển cuộn ngang khác nhau được nhúng trong bảng điều khiển cuộn dọc chính.

Trong tất cả các phiên bản (bao gồm kiểu bàn phím/chuột đầy đủ) bảng điều khiển chiếm 100% chiều rộng của vùng chứa, vì vậy nó giống như một sọc ngang trên trang.

Trong phiên bản giao diện cảm ứng nhỏ, ví dụ: dành cho điện thoại thông minh, tôi muốn nó cũng thay đổi kích thước thành chiều cao đầy đủ của cửa sổ sao cho khi bạn cuộn theo chiều dọc đến cửa sổ, nó có thể chiếm toàn màn hình.

iPhone làm cho điều này phức tạp vì $ (cửa sổ) .height() hoặc tuy nhiên bạn muốn truy vấn dường như phụ thuộc vào việc thanh URL có hiển thị hay không.

Nếu không có vỏ mã đặc biệt để biết nếu nó trên iPhone hoặc thêm vào hacks để cuộn cửa sổ để tắt thanh URL và sau đó truy vấn chiều cao, có cách nào để hỏi Safari mobile không, chiều cao cửa sổ "sẽ mang lại, trên 3GS của tôi, một câu trả lời là 416 bất kể thanh URL hiện có hiển thị hay không?

Tôi muốn tìm một cách nền tảng trung lập để hỏi, đối với tất cả các điện thoại thông minh lớn, "chiều cao nào tôi có thể đặt bảng này để khi bạn cuộn đến nó, nó sẽ lấp đầy toàn bộ cửa sổ trình duyệt?"

Cảm ơn, đã đánh đầu tôi chống lại điều này trong một thời gian và đã đào sâu quanh đây và không thể tìm thấy thông tin cụ thể này.

Answer 1

Tôi cũng đang tìm giải pháp cho điều này. Không thành công. Tôi đã kết thúc với một hack như bạn thực sự muốn tránh. Nhưng dường như không có giải pháp nào khác xung quanh, tôi nghĩ tôi để lại các chi tiết ở đây:

Trong trường hợp của tôi, trang không có gì ngoài một lớp có kích thước lớn hơn khung nhìn cho phép, giữ nguyên bản gốc tỷ lệ khung hình. Vì vậy, tôi có một chức năng mà tôi gọi vào tải và oriantation thay đổi và nó đi như thế này:

function updateImgLayer() { 
    $('#imgLayer img').hide(); // to prevent flickering 
    $('#imgLayer').height("5000px"); // to be sure it's bigger then the viewport  

    // timeout of zero ms makes sure layer-resize is finished in mobile-safari 
    // the android-browser seems to need more time – set it to 300 ms there. 
    setTimeout(function() { 
     window.scrollTo(0, 1); // scroll the url-bar out 

     $('#imgLayer').height(window.innerHeight + "px"); 

     var imgH = $('#imgLayer .height').text(); // wrote img-dimensions in there by php 

     // the rest is to scale the image 
     var imgW = $('#imgLayer .width').text(); 
     var winH = window.innerHeight; 
     var winW = $(window).width(); 

     if((imgH/imgW) > (winH/winW)) { 
      $('#imgLayer img').css({ top: "0px", width: "auto", height: $('#imgLayer').height() + "px" }); 
     } else { 
      $('#imgLayer img').width($('#imgLayer').width() + "px"); 
      var cImgH = ($('#imgLayer').width()/imgW) * imgH; 
      var top = $('#imgLayer').height()/2 - cImgH/2; 
      $('#imgLayer img').css({ top: top+"px", height: "auto" }); 
     } 

     $('#imgLayer img').fadeIn(200); 

}, (android?300:0)); 

}