gpt4 book ai didi

css - Position:fixed in iOS5 当输入聚焦时移动

转载 作者:技术小花猫 更新时间:2023-10-29 10:20:18 24 4
gpt4 key购买 nike

我的移动应用程序顶部有一个位置为:固定的 div,因此它将保留在浏览器的顶部(它在 ios 4 和更低版本中滚动,这很好)。当输入获得焦点并调出键盘时,div 会向下移动到页面中间。看截图:

http://dbanksdesign.com/ftp/photo_2.PNG

编辑:这是一个简化的测试页面: http://dbanksdesign.com/test/

<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>

.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }

最佳答案

不幸的是,您可能最好使用 absolute为您定位 fixed使用 IOS 时的元素。是的,IOS5确实声称支持fixed定位,但当您在该固定元素中有交互式控件时,这一切都会失败。

我的 switchitoff.net 上的搜索框也有同样的问题地点。在 IOS5 中,如果在滚动页面时搜索框获得焦点,则固定标题会跳到页面下方。我尝试了各种解决方法,我目前拥有的是 <div>它位于搜索框上方。当这个 <div>单击会发生以下情况:

  1. 页面滚动到顶部
  2. fixed header 更改为 absolute
  3. <div>覆盖搜索框是隐藏的
  4. 搜索<input>专注

当搜索框失去焦点时,上述步骤相反。此解决方案可防止单击搜索框时页眉跳到页面下方,但对于更简单的站点,您最好首先使用绝对定位。

IOS5 和固定定位还有一个棘手的问题。如果您的 fixed 上有可点击的元素区域 body元素在它们后面滚动,这可能会破坏您的触摸事件。

例如,在 switchitoff.net 上当交互式元素在它们后面滚动时,固定标题上的按钮变得不可点击。 touchstart当点击这些按钮时,甚至没有被解雇。幸好onClick似乎仍然有效,尽管由于延迟,这始终是 IOS 的最后手段。

最后请注意(在 IOS5 中)如何单击固定标题并滚动页面。我知道这模拟了在普通浏览器中在固定标题上使用滚轮的方式,但肯定这种范例对触摸 UI 没有意义?

希望 Apple 会继续改进固定元素的处理,但与此同时坚持使用 absolute 会更容易。如果您在固定区域有任何互动,请定位。那或者在事情简单得多的时候回到 IOS4!

关于css - Position:fixed in iOS5 当输入聚焦时移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8057485/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com