如何调整reCAPTCHA弹窗使其适配小屏移动设备？

以下是几个可落地的解决方案，针对iPhone SE这类小屏设备上reCAPTCHA弹窗底部按钮超出可视区域的问题：

1. 强制覆盖弹窗的定位样式 #

reCAPTCHA的动态弹窗容器通常带有特定类名（如.g-recaptcha-bubble或.recaptcha-modal，需用浏览器开发者工具确认当前实际类名），可以通过CSS强制调整其定位规则：

/* 针对小屏设备的媒体查询 */
@media screen and (max-height: 700px) {
  .g-recaptcha-bubble {
    top: 5vh !important; /* 替换过大的默认top值 */
    max-height: 90vh !important; /* 限制弹窗最大高度为视口的90% */
    overflow-y: auto !important; /* 允许弹窗内部滚动 */
  }
}

注意：使用!important是为了覆盖reCAPTCHA的内联样式，需确保选择器的优先级足够。

2. 动态监听视口并调整弹窗位置 #

由于弹窗是触发验证后才生成的，可在验证触发后或监听窗口 resize 事件时，用JS动态调整位置：

// 触发reCAPTCHA验证后的回调逻辑示例
function onRecaptchaTriggered() {
  // 延迟一段时间等待弹窗生成
  setTimeout(() => {
    const recaptchaBubble = document.querySelector('.g-recaptcha-bubble');
    if (window.innerHeight < 700 && recaptchaBubble) {
      recaptchaBubble.style.top = '5vh';
      recaptchaBubble.style.maxHeight = '90vh';
      recaptchaBubble.style.overflowY = 'auto';
    }
  }, 500);
}

// 同时监听窗口大小变化
window.addEventListener('resize', () => {
  const recaptchaBubble = document.querySelector('.g-recaptcha-bubble');
  if (window.innerHeight < 700 && recaptchaBubble) {
    recaptchaBubble.style.top = '5vh';
    recaptchaBubble.style.maxHeight = '90vh';
  }
});

3. 检查页面视口设置 #

确保页面的viewport meta标签配置正确，避免页面缩放导致reCAPTCHA的自动适配逻辑失效：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

4. 尝试切换reCAPTCHA的尺寸参数 #

在渲染reCAPTCHA时，指定size="compact"参数，可能会触发不同的弹窗布局逻辑，改善小屏适配：

<div class="g-recaptcha" data-sitekey="你的sitekey" data-size="compact"></div>

注意事项 #

• 需用浏览器开发者工具确认当前reCAPTCHA弹窗的实际类名，Google可能会更新这些类名；
• 样式修改仅调整定位和高度，不要篡改验证按钮或核心验证元素，避免违反reCAPTCHA使用条款。

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