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

发布于 2024-08-25 12:52:52 字数 251 浏览 6 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野生奥特曼 2024-09-01 12:52:53

这种情况在 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 版本，因此您可能希望在较旧的设备上延迟加载可滚动性，您可以使用以下 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
    }
}

This situation has changed with iOS 5. Now you can use overflow:scroll or position:fixed and it will do what is expected. For example, this type of code:

<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>

...should work without problems.
Though there are still many devices running older iOS versions, so you might want to lazy-load Scrollability on older devices, which you can test with this 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
    }
}

回复收藏 0 原文