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

问题描述 投票:0回答:1

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

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

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

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

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

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

有什么想法吗?

html ios css mobile mobile-webkit
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.