相关疑难解决方法(0)
修复了持久性标题并滚动到焦点输入字段
问题:基于iOS7 Safari中主屏幕Web应用程序的给定示例,如何实现永不滚动出视图的固定持久标头,以及在敲击时滚动到视图中的输入字段？
这两个示例有一个区别,一个height=device-height在视口中,另一个没有.
没有设备高度
<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />
演示:http://run.plnkr.co/plunks/SU8Csk/
编辑链接:http://plnkr.co/edit/SU8Csk
好处:固定标题在点击字段时不会改变位置/高度.
坏处:用户无法在不手动滚动或按下"下一步"按钮的情况下看不到聚焦的字段.这可能非常繁琐,尤其是如果字段位于不溢出的页面上.
设备高度
<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />
演示:http://run.plnkr.co/plunks/rPoyaB/
编辑链接:http://plnkr.co/edit/rPoyaB
好处:用户根据需要滚动到焦点字段.
坏处:固定标题完全滚出视图,这需要始终保持在屏幕上.场景是,它将包含一个取消按钮和一个始终可以访问的保存按钮.此外,当字段模糊时,标题本身看起来被压扁,直到用户将其向下滚动到视图中,但如果禁用溢出,则它们甚至无法执行此操作.
丑陋的:在我的非平凡的真实代码中,远离这些简化的例子,有一堆元素绝对位于标题内以创建曲线"标签"效果,这些元素的对齐完全关闭.
您应该能够在iOS7 Safari中打开每个演示URL,添加到主屏幕,然后启动以演示该问题.
解决这个问题的最佳方法是什么？
注意:我知道iOS7 Safari中存在"错误",特别是涉及到主屏幕Web应用程序时,但我相信可能存在与我如何构建页面相关的解决方法.我做了大量的研究(见下文),但我很难找到解决方案.
"固定标题"问题的相关链接: ios7 +中需要固定标题,如何获得固定标题以保持在页面顶部？, 修复了移动safari网站上的文本字段标题, iOS 5固定定位和虚拟键盘, ipad/iphone上固定页眉,页脚和侧栏的问题, CSS"位置:固定;" 在iPad/iPhone上？, 固定在Mobile Safari中的定位,当在Mobile Safari中打开虚拟键盘时, 如何阻止我的固定导航像这样移动？, web应用程序 - 设备高度/键盘问题 …
推荐指数
解决办法
查看次数
iOS5 -webkit-overflow-scrolling导致触摸事件停止工作
当使用[ -webkit-overflow-scrolling:touch ;]时,滚动区域运行良好,但它会导致触摸事件停止滚动区域的工作.有人有同样的问题吗？谁可以给我一些关于这个新滚动功能的官方链接？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27:我已经解决了这个问题,但我仍然难怪真正的原因.在我的例子中,我在一个网页中有几个部分,每个部分都有一个滚动区域和一个标题,每次只显示一个部分,并使用css3动画结合转换切换部分.当在所有部分的滚动区域中添加[-webkit-overflow-scrolling]时,触摸事件会随机停止工作,所以我只是在当前显示的部分中添加[-webkit-overflow-scrolling]并在部分为时将其删除隐.这很好但我仍然不知道是什么原因引起了这个问题.
推荐指数
解决办法
查看次数