Javascript 修复了mobile safari网站上带有文本字段的标题
我已经四处寻找了一段时间，但似乎找不到任何解决此问题的方法。当一个输入字段在MobileSafari中获得焦点（没有检查其他浏览器）时，一个固定元素将跳转，因为safari将该元素放在视图中（靠近中心）。该错误仅在用户已滚动时发生，如果用户仍在页面顶部，则不会发生任何错误 截图前后 有人知道如何解决这个问题吗？我遇到的唯一解决方案是在聚焦时卷回顶部，然后在模糊上卷回位置。。。这似乎是一个非常草率的解决方案 这是截图中的示例站点，非常基本，没有任何异常Javascript 修复了mobile safari网站上带有文本字段的标题,javascript,css,header,mobile-safari,css-position,Javascript,Css,Header,Mobile Safari,Css Position,我已经四处寻找了一段时间，但似乎找不到任何解决此问题的方法。当一个输入字段在MobileSafari中获得焦点（没有检查其他浏览器）时，一个固定元素将跳转，因为safari将该元素放在视图中（靠近中心）。该错误仅在用户已滚动时发生，如果用户仍在页面顶部，则不会发生任何错误 截图前后 有人知道如何解决这个问题吗？我遇到的唯一解决方案是在聚焦时卷回顶部，然后在模糊上卷回位置。。。这似乎是一个非常草率的解决方案 这是截图中的示例站点，非常基本，没有任何异常 <!DOCTYPE htm
<!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>
© MySite <?php echo date('Y') ?>
</footer>
</body>
</html>
麦斯特
身体{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
字体大小：16px；
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
}
页眉、页脚{
背景色：#333；
填充：10px；
颜色：#FFF；
宽度：100%；
}
标题{
位置：固定；
排名：0；
左：0；
}
输入[类型=搜索]{
位置：相对位置；
左边距：20px；
宽度：160px；
字体大小：16px；
高度：26px；
}
部分{
填充：10px；
}
麦斯特
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
&抄袭；麦斯特