logo标签列表

移动端固定顶部栏在缩放时的处理方法

javascripthtmlmobiletoolbarfixed
4
我正在尝试在HTML5中为移动设备实现一个固定的顶部栏，当用户缩放网页时，它也保持固定。就我所见，在Jquery mobile上，他们禁用了缩放功能以实现固定的顶部栏。Google制作了自己的内容滚动实现，以使gmail应用程序具有固定的顶部栏。但是他们也禁止了缩放。有人知道此问题的解决方法吗？当他们缩放网页时，是否可以使用JS将栏重新定位到新区域的顶部？更新：我在post中找到了一个示例，其中有一个固定的顶部栏，不会禁用缩放，但是当您缩放网页时，它不会保持在顶部。我还看到了IOs上Safari的文档，但我找不到获取新缩放区域的相对位置的方法，以便在每个缩放事件中将栏重新定位到其顶部。
你需要知道用户是否缩放了页面。为此，你需要像resize事件一样的zoom事件。但是很明显这个事件并不存在 :) 可以查看这里的答案，如果你确实需要这个功能。有一些建议，比如轮询和依赖于支持时的resize事件。 - sabithpocker
2个回答
1

苹果公司已经实现了一个特殊的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库可以进行缩放：

希望这能有所帮助！
1
我通过添加代码解决了固定位置和缩放之间的冲突。
"data-disable-page-zoom="false""

对于固定的标签。 希望这可以帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接