iphone - jquery mobile 和 iphone - 页面底部的空白

Question

我有一个 jquery 移动网页。它在桌面浏览器和 android 上看起来都不错。

但在 iphone 的 safari 中，页面底部有一个奇怪的空白区域。.ui-page 的 min-height 看起来有问题，因为空白与 safari 的 title-bar + url-bar 一样高。

有任何想法吗？

编辑：我发现了问题：它是：

 html, body {
    overflow-x: hidden !important;
    position: relative !important;
 }

Answer 1

我希望这段代码能解决你的问题。

例子

// Get height of the document
var screen = $(document).height();

// Get height of the header
var header = $('[data-role=header]').height();

// Get height of the footer
var footer = $('[data-role=footer]').height();

// Simple calculation to get the remaining available height
var content = screen - header - footer;

// Change the height of the `content` div
$('[data-role=content]').css({'height': content });

Answer 2

问题在于 min.css 中的 min-height 属性。改变

ui-page { min-height:"400px" }

希望它有效:)

Answer 3

很抱歉在一个老问题上发帖，但我最近遇到了这个问题。

原来这个问题是由人们提供的隐藏地址栏的 JS 函数在某些浏览器中引起的。

如

function hideAddressBar(){
  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
    document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
  setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});