Teams个人应用（Iframe）输入框点击时键盘上方出现空白问题

问题重现 #

• 基于Teams开发者门户创建的Personal App，配置完整Content URL后，iframe在浏览器、桌面端加载正常
• 移动端（主要为Android，偶发iOS）点击输入框弹出键盘时，键盘上方出现空白区域；关闭键盘后多数情况空白消失，但偶尔底部残留空白
• 直接在普通浏览器打开目标网站无此问题，仅在Teams iframe嵌入环境下出现
• 已尝试清除缓存、卸载重装应用，问题未解决
• 侧载提供的manifest.json到桌面Teams后，移动端点击input标签可稳定复现

排查与修复方案 #

1. 优化视口配置 #

调整网页的viewport meta标签，适配Teams移动端容器的动态高度变化：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

• viewport-fit=cover 确保内容延伸至屏幕边缘，减少Teams容器的布局冲突
• 页面根元素（html/body）避免设置固定高度，改用 min-height: 100vh 或 height: 100% 适配动态高度

2. 监听窗口尺寸变化，动态调整布局 #

Teams移动端的iframe容器在键盘弹出/收起时会改变高度，通过监听事件强制同步页面高度：

// 监听全局窗口 resize
window.addEventListener('resize', () => {
  document.body.style.height = `${window.innerHeight}px`;
});

// 针对Android视觉视口的精准调整
if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', () => {
    document.body.style.height = `${window.visualViewport.height}px`;
  });
}

• 确保html/body未设置 overflow: hidden，否则会导致内容截断后残留空白

3. 重置页面基础样式，避免容器冲突 #

添加CSS重置页面与Teams iframe容器的样式冲突：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: auto;
}

/* 确保iframe填满容器 */
iframe {
  border: none;
  width: 100%;
  height: 100%;
}

4. 检查manifest.json配置 #

确认manifest中已添加必要权限，确保应用能正确获取屏幕尺寸：

"devicePermissions": ["geolocation", "media", "notifications", "microsoftTeams.executeDeepLink"],

• 同时验证Content URL指向的页面未设置 X-Frame-Options 限制，保证Teams可正常嵌入

5. iOS专项修复 #

iOS键盘弹出会导致视口偏移，添加以下CSS适配：

@media (max-width: 767px) and (orientation: portrait) {
  body {
    min-height: -webkit-fill-available;
  }
}

内容的提问来源于stack exchange，提问作者Sanjana Gudla