gpt4 book ai didi

javascript - 修复了移动 safari 网站上带有文本字段的标题

转载 作者:数据小太阳 更新时间:2023-10-29 05:36:35 25 4
gpt4 key购买 nike

我已经四处寻找了一段时间,但似乎找不到解决此问题的方法。当输入字段在移动 safari 中获得焦点时(尚未检查其他浏览器),由于 safari 将该元素置于 View 中(靠近中心),固定元素将跳转。该错误仅在用户滚动时发生,如果用户仍位于页面顶部,则不会发生任何事情。

前后截图

before focus

after focus

有没有人知道如何解决这个问题?我遇到的唯一解决方案是在聚焦时滚动回顶部,然后在模糊时滚动回原位……这似乎是一个非常草率的解决方案。

这是屏幕截图中的示例站点,非常基本,没有任何异常。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, scale=1"/>
<title>MySite</title>
<style>
body{
height:100%;
width:100%;
padding:0;
margin:0;
font-size:16px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
header, footer {
background-color:#333;
padding:10px;
color:#FFF;
width:100%;
}
header {
position:fixed;
top:0;
left:0;

}
input[type=search] {
position:relative;
margin-left:20px;
width:160px;
font-size:16px;
height:26px;
}
section{
padding:10px;
}
</style>
</head>
<body>
<header>
<b>MySite</b>
<input type='search' placeholder='Search'>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</sction>
<footer>
&copy; MySite <?php echo date('Y') ?>
</footer>
</body>
</html>

最佳答案

我也有同样的问题。但我意识到固定位置只是延迟而不是损坏(至少对我而言)。滚动并等待 5-10 秒,查看搜索栏是否调整回屏幕顶部。我相信这不是错误,而是键盘打开时的延迟响应。

关于javascript - 修复了移动 safari 网站上带有文本字段的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13435833/

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