在移动端页面中，当软键盘弹出时往往会把输入框遮挡住，针对这一兼容性问题，有哪些可行的解决方案和注意事项？

回答思路

1. 【回答框架 1】软键盘遮挡的本质是移动端浏览器视口尺寸变化与固定定位元素的交互问题。常见方案之一是监听键盘弹出事件（如Android的resize、iOS的focusin/out），在键盘弹出时动态调整页面或输入框的位置，确保输入框可见。
2. 【回答框架 2】iOS上可通过scrollIntoView或调整scrollTop让输入框滚动到可视区域；Android上可通过修改视口高度或使用window.innerHeight变化来感知键盘状态。也可利用CSS环境变量或虚拟键盘API（如VisualViewport）实现更精确的控制。
3. 【回答框架 3】另一种方案是采用flexible布局或避免使用position:fixed定位输入框，改用flow布局或使用position:absolute并根据视口动态计算，减少遮挡风险。对于复杂场景，可自定义弹出层，将输入框固定在键盘上方。
4. 【回答框架 4】实际项目需结合框架（如Vue/React）的生命周期或第三方库（如better-scroll）进行处理，并注意防抖和性能，避免频繁触发重排。
5. 【回答框架 5】根据平台差异，iOS和Android的键盘行为不同，需分别测试并处理。可提供回退方案，如输入框失焦时滚动回原位。
6. 【关键点 1】监听键盘弹出事件并动态调整输入框位置是实现的关键。
7. 【关键点 2】iOS建议使用scrollIntoView或调整scrollTop，Android可依赖resize事件。
8. 【关键点 3】避免使用fixed定位，优先考虑流式布局或动态计算绝对位置。
9. 【关键点 4】利用VisualViewport API可更精确获取可视区域变化。
10. 【关键点 5】平台差异需分别处理，并考虑防抖和性能优化。
11. 【易错点 1】不同浏览器和系统对键盘事件的触发时机不一致，依赖单一事件风险高。
12. 【易错点 2】过度监听resize事件会导致性能问题，需节流或防抖。
13. 【易错点 3】仅调整输入框位置而不处理其他元素可能导致页面布局错乱。