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

Question

我正在开发一个网络应用程序,我需要一个div来坚持视口的底部.始终可见,始终位于视口的底部.这里有一个我想要的例子:页脚.不幸的是,这不适用于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
    }
}