在移动Web应用程序中滑动页面

时间:2011-06-09 06:20:44

标签: javascript jquery-mobile iphone

在jquerymobile中,当显示next / prev页面时会有一个幻灯片转换,但在iPhone4上,它的行为/动画就像这样 - 点击下一个按钮
- 显示了条形图 - 整个页面向下移动
- 显示下一页(通过幻灯片过渡)
--Url酒吧再次隐藏了 - 整个页面向上移动

如何在移至下一页时避免显示/隐藏网址栏(以及页面向上/向下移动)。

2 个答案:

答案 0 :(得分:2)

我相信这个视口元标记会帮助您解决显示地址栏的问题(如果您使用的是任何alpha版本):

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

然而,在第一个测试版中添加了对此的支持,我的移动网站(使用JQuery Mobile 1.0 Beta 1)不显示地址栏,除非您向上滚动以在iPhone上看到它。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

或者您可以在此处下载所有必需的JQuery Mobile Beta文件:

http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.zip

注意:在视口元标记中将初始和最大比例设置为相同的值会禁用缩放,如果要允许缩放,只需使最大比例大于初始比例。

答案 1 :(得分:0)

你可以尝试在可能有帮助的地方坚持window.scrollTo(0, 1)