html - 修复了键盘进入屏幕时移动浏览器中的元素问题

标签 html css responsive-design

我不知道该如何描述这就是我录制视频的原因。屏幕上有固定的黄色文字。当键盘不在屏幕上时,固定文本行为是正常的。当我专注于屏幕并且键盘变得可见时,固定元素开始随页面滚动。是错误还是什么?对此有什么解决方案吗?

视频:https://www.youtube.com/watch?v=Nq60jH4XiJs

https://codepen.io/anon/pen/rZgKqG

 <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=1" />
    </head>
      <textarea style="min-height: 50px;"></textarea>
      <div style="height: 1000px; background-color: green">
                    div - height 1000px
      </div>
      <div style="position: fixed; top: 10px; right: 10px; background-color: yellow;">
                    Some Fixed Text
      </div>
    </html>

最佳答案

不幸的是,当在页面上使用固定元素时,这是 iOS 中 Safari 的预期行为。

看看这篇提供可能解决方案的文章: https://medium.com/@im_rahul/safari-and-position-fixed-978122be5f29

关于html - 修复了键盘进入屏幕时移动浏览器中的元素问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52485225/

相关文章:

javascript - 通过javascript从MySQL数据库读取数据并相应地改变radio的prop

javascript - 为什么 moment.utc(...).diff(moment.utc(...)) 受到源日期偏移量的影响

html - 绝对居中的 div 没有正确溢出

css - 裁剪背景 CSS

java - 如何使用 Bootstrap 从 slider 中的 URL 渲染 html 上的图像

html - 如何在 Ionic 4 中将边界半径添加到 ion-img

Php 管理面板在页脚下方显示编辑帖子表单

html - 如何保持两个不同 HTML 元素之间的高度和宽度?

twitter-bootstrap - 如何使用 Bootstrap 3 实现这种桌面/移动布局?

html - 使 div 响应没有文本内容