移动端Web视图reCAPTCHA显示异常问题（已更新细节）

问题背景 #

使用React框架的react-google-recaptcha组件时，移动端视图下「Privacy . Terms」文本会溢出组件框，尝试过调整缩放、宽高、边距及user-scalable等设置均无效。

核心原因 #

reCAPTCHA官方对内部DOM结构和样式有严格限制，直接缩放容器或强制固定宽高会破坏内部文本容器的自适应布局，导致文本无法正确换行或溢出。

解决方案 #

放弃缩放操作，通过调整容器布局+覆盖内部元素样式来适配移动端：

1. 基础容器样式（保证Web端正常显示）

.recaptcha-container {
  margin-top: 30px;
  /* 让容器自适应组件原始宽度，避免强制宽高 */
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

2. 移动端适配样式（针对768px及以下屏幕）

@media only screen and (max-width: 768px) {
  .recaptcha-container {
    margin-left: -15px; /* 保留你的定位需求 */
    padding-right: 15px; /* 给右侧溢出文本预留空间 */
    width: calc(100% + 30px); /* 抵消左右边距，确保容器宽度足够 */
  }

  /* 覆盖reCAPTCHA内部元素的固定宽度限制 */
  .recaptcha-container .g-recaptcha > div,
  .recaptcha-container .rc-anchor-normal-footer {
    min-width: unset !important;
    width: 100% !important;
  }

  /* 调整文本容器的换行规则 */
  .recaptcha-container .rc-anchor-terms {
    white-space: wrap; /* 允许文本换行 */
    text-align: right;
  }
}

关键注意事项 #

• 禁止使用transform: scale()，该操作会导致内部元素的布局计算异常，是溢出问题的主要诱因
• 深度选择器的类名需要根据实际DOM结构调整（可通过浏览器开发者工具查看reCAPTCHA生成的类名）
• 如果使用CSS Modules，需将reCAPTCHA的类名包裹在:global()中，例如:global(.g-recaptcha)

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