javascript - 使用主屏幕图标会破坏 iPhone 上的设备高度

Question

我正在使用： <meta name="apple-mobile-web-app-capable" content="yes"> 并在我的主屏幕上添加一个图标以绕过 iPhone 上的 Chrome 浏览器。但是，我将 div 高度设置为设备高度的 100% 的代码在使用它时失败了。

$(".swiper-container").css({
    "width" : $(window).width(), 
    "height" : $(window).height()
});

如果我在 Safari 上正常运行该页面，它可以正常工作，但如果我从保存的主屏幕图标运行，则不能。有任何想法吗？

干杯。

更多信息：

www.andrewlarking.co.uk/LBSEvents/lbss.html

破碎时

在 Safari 中工作时

score 1 · Accepted Answer

尝试使用不带 jQuery 的纯 javascript 执行此操作，将 id=swiper-container 放入您的 div 并使用以下代码：

e = document.getElementById('swiper-container');
e.style.height = window.innerHeight + "px";
e.style.width  = window.innerWidth + "px";

score 0 · Accepted Answer

最后，我在我的身体上也使用了相同的 JQuery：

$("body").css({ 
    "min-height" : $(window).height()
});

这解决了它，尽管在 iPhone 5 上你有黑色边框，就像它是 iPhone 4 应用程序一样。

2 回答 2