移动端Invisible reCAPTCHA v2挑战界面截断问题求助

我之前也碰到过一模一样的移动端reCAPTCHA v2截断问题，试了各种CSS调整都没用，后来折腾出几个亲测有效的方案，分享给你：

1. 排查父容器的溢出限制 #

很多时候截断问题不是reCAPTCHA本身的锅，而是它的父元素加了overflow: hidden或者固定的窄宽高。你可以先给reCAPTCHA的父容器临时加个border: 2px solid red，看看是不是父容器的范围把弹窗给挡住了。如果是，把父元素的overflow改成visible，或者调整父容器的min-width适配移动端视口。

2. 针对弹窗容器做定向CSS调整 #

reCAPTCHA的弹窗有专属的类名（比如.grecaptcha-bubble，你可以用浏览器开发者工具的元素定位功能确认），写个移动端媒体查询专门调整它的样式：

@media (max-width: 480px) {
  .grecaptcha-bubble {
    transform: scale(0.9) !important;
    transform-origin: top center !important; /* 缩放原点设为顶部居中，避免弹窗跑出去 */
    width: 95vw !important; /* 用视口宽度保证不超出屏幕 */
    margin: 0 auto !important;
  }
}

这里的!important是为了覆盖reCAPTCHA自带的内联样式，如果你不想用!important，可以用更精确的CSS选择器（比如加上父容器的类名）。

3. 调整初始化参数适配移动端 #

如果你是通过JS代码初始化reCAPTCHA的，试试加上size: 'compact'参数，这个参数会让reCAPTCHA的界面更紧凑，适配小屏幕：

grecaptcha.render('your-recaptcha-container-id', {
  sitekey: '你的站点密钥',
  size: 'compact',
  callback: yourSuccessCallback
});

4. 检查页面的Viewport设置 #

移动端页面一定要确保Viewport设置正确，否则reCAPTCHA会根据错误的视口尺寸渲染：

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

如果Viewport里设置了固定宽度或者允许用户缩放，都可能导致弹窗错位截断。

另外，有时候浏览器缓存会导致样式异常，你可以试试清空缓存或者用无痕模式测试效果。

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