Chiều cao trang trên thiết bị di động jQuery

Question

Trong ngày hôm qua, tôi đã cố gắng tìm ra cách thay đổi kiểu dáng chiều cao tối thiểu trên trang di động jQuery khi xem trong safari di động. Tôi đã thử, kiểu nội tuyến, ghi đè kiểu trang-phong cách và chưa tìm cách ghi đè chiều cao của data-role = "page". Lý tưởng nhất là nếu trang "nội dung" nhỏ hơn chiều cao "trang", tôi muốn chiều cao "trang" tự động điều chỉnh thành "nội dung". Tôi đã đính kèm một minh họa để giải thích rõ hơn vấn đề.

<div data-role="page"> 
    <div data-role="header"> 
      Header Elements 
    </div> 
    <div data-role="content" class="homeNav"> 
      <ul data-role="listview" data-inset="false" data-filter="false"> 
       <li><a href="expertise.html">Expertise</a></li> 
       <li><a href="greatesthits.html">Greatest Hits</a></li> 
       <li><a href="profile.html">Profile</a></li> 
       <li><a href="mindset.html">Mindset</a></li> 
       <li><a href="connect.html">Connect</a></li> 
      </ul> 
    </div><!-- /content --> 

    <div data-role="footer" data-position="fixed"> 
      Footer elements 
    </div><!-- /footer --> 
</div><!-- /page --> 

Answer 1

Các min-height của phần tử data-role="page" được thiết lập thông qua JavaScript trong một handler resize kiện cho đối tượng window. Bạn có thể tạo JavaScript của riêng bạn mà thay đổi kích thước trang khác nhau:

$(function() { 
    $(window).bind('resize', function (event) { 
     var content_height = $.mobile.activePage.children('[data-role="content"]').height(), 
      header_height = $.mobile.activePage.children('[data-role="header"]').height(), 
      footer_height = $.mobile.activePage.children('[data-role="footer"]').height(), 
      window_height = $(this).height(); 

     if (content_height < (window_height - header_height - footer_height)) { 
      $.mobile.activePage.css('min-height', (content_height + header_height + footer_height)); 
      setTimeout(function() { 
       $.mobile.activePage.children('[data-role="footer"]').css('top', 0); 
      }, 500); 
     } 
     event.stopImmediatePropagation(); 
    }).trigger('resize'); 
}); 

Đây là một bản demo: http://jsfiddle.net/sAs5z/1/

Thông báo các setTimeout dùng để đặt fixed-position-footer; thời gian chờ có thể được thực hiện nhỏ hơn. Điều này được sử dụng bởi vì Khung công tác di động jQuery đã định vị lại fixed-position-footer trở lại phần dưới cùng của trang. Ví dụ về điều này có thể được xem tại đây: http://jsfiddle.net/sAs5z/

Lưu ý khác, bạn có thể chỉ muốn định vị lại thành phần fixed-position-footer và để nguyên trang min-height của trang; điều này sẽ làm cho độ dốc của trang che phủ toàn bộ màn hình nhưng chân trang sẽ không có bất kỳ khoảng trống nào giữa nó và nội dung. Đây là bản trình diễn của phương pháp này: http://jsfiddle.net/sAs5z/2/

Answer 2

Vé cũ nhưng tôi có giải pháp mà tôi thích hơn. Nó đặc biệt unbinds sự kiện thay đổi kích cỡ thông qua một số hack nội bộ jQuery. Tôi không thích giải pháp của Jasper bởi vì nó phụ thuộc vào một sự kiện bắn để chặn một sự kiện khác, và các sự kiện trong lý thuyết sẽ không bao giờ biết về nhau/bạn không bao giờ nên phụ thuộc vào thứ tự mà các sự kiện cháy.

$(function() { 
    // WARNING: Extremely hacky code ahead. jQuery mobile automatically 
    // sets the current "page" height on page resize. We need to unbind the 
    // resize function ONLY and reset all pages back to auto min-height. 
    // This is specific to jquery 1.8 

    // First reset all pages to normal 
    $('[data-role="page"]').css('min-height', 'auto'); 

    // Is this the function we want to unbind? 
    var check = function(func) { 
     var f = func.toLocaleString ? func.toLocaleString() : func.toString(); 
     // func.name will catch unminified jquery mobile. otherwise see if 
     // the function body contains two very suspect strings 
     if(func.name === 'resetActivePageHeight' || (f.indexOf('padding-top') > -1 && f.indexOf('min-height'))) { 
      return true; 
     } 
    }; 

    // First try to unbind the document pageshow event 
    try { 
     // This is a hack in jquery 1.8 to get events bound to a specific node 
     var dHandlers = $._data(document).events.pageshow; 

     for(x = 0; x < dHandlers.length; x++) { 
      if(check(dHandlers[x].handler)) { 
       $(document).unbind('pageshow', dHandlers[x]); 
       break; 
      } 
     } 
    } catch(e) {} 

    // Then try to unbind the window handler 
    try { 
     var wHandlers = $._data(window).events.throttledresize; 

     for(x = 0; x < wHandlers.length; x++) { 
      if(check(wHandlers[x].handler)) { 
       $(window).unbind('throttledresize', wHandlers[x]); 
       break; 
      } 
     } 
    } catch(e) {} 
}); 

Answer 3

Tôi đang gặp phải sự cố tương tự khi hiển thị cửa sổ bật lên có lớp phủ $ .mobile.resetActivePageHeight(); đã làm các trick cho tôi. Thanx!