如何实现Google reCAPTCHA宽度100%的响应式布局（不使用transform scale）

我太懂你不想用transform: scale()的痛点了——缩放后经常会出现模糊、点击区域错位的问题，完全不符合正经的响应式布局要求。下面给你几个纯靠宽度控制就能搞定Google reCAPTCHA自适应的方案，亲测有效：

其实Google reCAPTCHA本身就支持响应式，只是很多人没用到正确的容器设置：

• 给reCAPTCHA的外层容器设置width: 100%;，再用max-width限制最大宽度（比如桌面端设320px，移动端设280px）
• 容器的父元素也要保证有合适的宽度空间，比如移动端让父元素占满屏幕，桌面端控制在布局范围内
• 搭配data-size属性可以辅助调整，但核心还是容器的宽度控制，示例代码：

<div class="recaptcha-wrapper">
  <div class="g-recaptcha" data-sitekey="你的站点密钥" data-size="normal"></div>
</div>

对应的CSS：

.recaptcha-wrapper {
  width: 100%;
  max-width: 320px;
  margin: 0 auto; /* 可选，用来居中 */
  box-sizing: border-box;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .recaptcha-wrapper {
    max-width: 280px;
    padding: 0 15px; /* 避免贴边 */
  }
}

有时候reCAPTCHA会自带内联固定宽度，这时候可以用CSS强制让它继承容器宽度：

.g-recaptcha {
  width: 100% !important;
  box-sizing: border-box;
}

/* 确保内部的验证框元素也自适应 */
.g-recaptcha > div {
  width: 100% !important;
}

⚠️ 这里的!important是为了覆盖reCAPTCHA的内联样式，如果你的布局CSS优先级足够高（比如用了ID或者嵌套选择器），可以不用，但大多数情况下加了更稳妥。

如果你的业务场景不需要用户手动点击验证框（比如表单提交前的静默验证），直接用reCAPTCHA v3就完全没布局烦恼——它在后台运行，不显示任何UI，自然也就不需要适配宽度了。不过这个方案只适合不需要用户交互的场景。

附上你提供的布局截图：

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