iphone - 如何在 iPhone Web 应用程序中创建页脚/工具栏？

Question

我正在开发一个网络应用程序，我需要一个 div 来粘在视口(viewport)的底部。始终可见并且始终位于视口(viewport)的底部。这里有一个我想要的示例:footer 。不幸的是，这在 iPhone 上不起作用。我可以想出一些使用 javascript 来做到这一点的方法，但我宁愿不这样做。关于如何仅使用 CSS 在 iPhone 上获得这种效果有什么想法吗？

Answer 1

这种情况在 iOS 5 中发生了变化。现在您可以使用 overflow:scroll 或 position:fixed ，它会执行预期的操作。例如这样的代码:

<header style="
    position: fixed; top: 0; left: 0;
    width: 100%; height: 20px; font-size: 20px">
    Heading
</header>
<article style="margin: 20px 0">
    Your page here
</article>
<footer style="
    position: fixed; bottom: 0; left: 0;
    width: 100%; height: 20px; font-size: 20px">
    Footer
</footer>

...应该可以正常工作。尽管仍有许多设备运行较旧的 iOS 版本，因此您可能需要延迟加载 Scrollability在较旧的设备上，您可以使用以下 javascript 进行测试:

var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
    // load scrollability here. jquery example:
    $.getScript("/js/scrollability.min.js", function() {
        // code to run when scrollability's loaded
    }
}