IFrame模式，移动键盘在选择文本输入时会模糊键入字段

在HTML中，<iframe> 标签用于在当前页面中嵌入另一个文档。然而，使用 <iframe> 在移动端可能会导致虚拟键盘弹出时，覆盖输入框，从而影响用户体验。这是因为 <iframe> 作为一个独立的文档，其内容不会随着主页面中输入框的焦点变化而调整，导致输入框被虚拟键盘部分或完全遮挡。

解决方案

针对上述问题，可以考虑以下解决方案：

• 使用window.scrollTo方法：当输入框获得焦点时，手动滚动页面，使输入框位于虚拟键盘之上。这可以通过监听输入框的focus事件实现。

const inputField = document.querySelector('input');
inputField.addEventListener('focus', () => {
  setTimeout(() => {
    window.scrollTo({ top: inputField.getBoundingClientRect().top, behavior: 'smooth' });
  }, 300);
});

• 使用CSS的vh单位：设置 <iframe> 高度为视口高度的百分比，确保在虚拟键盘弹出时，<iframe> 有足够的空间显示在视口内。

iframe {
  height: 100vh; /* 1vh is 1% of the viewport height */
}

• 避免使用<iframe>：如果应用场景允许，尽量避免使用 <iframe>，而是通过其他方式实现内容嵌入，如使用AJAX加载内容，或者使用现代前端框架如React Native、Vue等，这些框架提供了更好的原生体验和响应式设计。

通过上述方法，可以有效改善使用 <iframe> 时移动设备上的用户体验，确保输入框在虚拟键盘弹出时仍然可见和可访问。