iOS上具有输入字段和标签的顶部固定导航栏的不可预测行为

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS上具有输入字段和标签的顶部固定导航栏的不可预测行为相关的知识,希望对你有一定的参考价值。

我有一个固定顶部'navbar'的网站,以及几个输入字段和标签“for”。 单击标签,可以将焦点集中在相应的输入上,而不会对页面的其余部分产生任何副作用。 (我已经在所有现代桌面浏览器和android的本机浏览器以及chrome上测试过它)。

一切都很好,除了ios(iPad,iPhone),点击相同的标签使得: 输入到焦点(预期)和在软键盘中滑动(这是预期的)。

现在,当我点击另一个输入的标签时,会发生默认滚动,新聚焦的输入正在调整其位置以保持在视口的可见部分内 - 这也是很好的和高度期望的行为,但同时,这会导致奇怪的效果固定在顶部的'navbar'。导航栏在整个视口中发生冲突,没有任何意义。

我需要补充一点,当我点击输入本身时也没有发生同样的行为 - 只有当我点击相应的标签时。

有谁之前经历过这个吗?看起来像iOS上的一个错误,但我真的很徘徊 - 点击标签,点击相应的输入以及为什么这种行为的实现仅在iOS上有所不同。

我有一个临时的解决方法,通过检测iPod,iPhone,iPad userAgent和从这些代理商的标签中删除“for”属性(我希望尽可能保留标签的“可点击性”),但它似乎不适合我。

有什么想法吗?

答案

U可以将导航栏的css位置属性从“fixed”替换为“absolute”,并将宽度和高度的单位从“%”或“px”切换为“vh”或“vw”,然后在ios上顺利进行。

以上是关于iOS上具有输入字段和标签的顶部固定导航栏的不可预测行为的主要内容,如果未能解决你的问题,请参考以下文章

webview中的iOS键盘样式?

是否可以将 UIView 的顶部固定到导航栏的底部?

固定/粘性/浮动顶部菜单导航栏的正确名称 [关闭]

25.当屏幕缩小的时候,固定顶部的导航栏的左右滚动

iOS7上带有标签栏的奇怪顶部空间

在基于标签栏的应用程序上添加导航栏