Question

我正在开发一个网络应用程序，我需要一个div来坚持视口的底部。始终可见，始终位于视口的底部。这里有一个我想要的例子：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
    }
}

Answer 2

你做不到。至少不是你的想法。

你必须假装整个东西是javascript。使用类似iScroll

的内容

有点糟糕但Mobile Safari根本不支持任何类型的固定定位。因此，您必须使页面大小等于屏幕大小，然后使用javascript处理触摸并设置滚动偏移和动画滚动条以及不手动的内容。

我链接的这个脚本为你做了很多，但它不像原生解决方案那样强大。

Answer 3

这是一个关于如何组合CSS3，HTML和JavaScript来为iPhone创建导航栏的示例。 http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/

ps：它在横向模式下工作。

Answer 4

这是一个带有代码的工作示例。这不适合胆小的人：

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 5

有一个新的JavaScript可以更轻松地运行：http://joehewitt.github.com/scrollability/

因此在iOS 5中会有固定位置和溢出滚动！

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

5 个答案: