4

我正在尝试在 HTML5 中为移动设备实现一个固定的顶部栏，当用户放大/缩小网页时它也保持固定。

据我在 Jquery mobile 上看到的，他们禁用放大/缩小以实现固定的顶栏。

Google 制作了自己的内容滚动实现来为 gmail 应用程序制作固定的顶部栏。但他们也不允许缩放。

有谁知道解决方法？知道当他们放大/缩小时我是否可以用 js 重新定位新区域顶部的栏？

更新：我发现这篇文章有一个固定顶部栏的示例，它不会禁用缩放，但是当您放大/缩小时，它不会停留在顶部。

此外，我在 IO 上看到了 Safari 的文档，但我找不到获取新缩放区域的相对位置的方法，因此我可以在每次放大/缩小事件时重新定位其顶部的栏。

4

2 回答 2

1

我通过添加解决了固定位置和缩放之间的冲突

"data-disable-page-zoom="false""

到固定标签。希望这能有所帮助。

于 2013-11-13T15:50:56.117 回答
1

Apple 实现了一个特殊的 META 标签来处理缩放：

<meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

这会禁用 iPhone 上的缩放功能，它也应该适用于 Android。

至于您想要的缩放效果，我的建议是完全禁用缩放，并使用 jQuery 和 CSS webkit 转换和动画来 100% 执行此操作。

#some-div {
    -webkit-transition: all 0.5s ease-out;
}

以下是其他一些可以进行缩放的 jQuery 库：

希望这会有所帮助！

于 2012-11-04T08:07:24.357 回答