修改Google Recaptcha CSS实现响应式适配，解决移动端显示问题

我之前也碰过类似的ReCaptcha移动端适配坑，结合你已经用display: grid和margin: auto搞定居中的情况，给你几个针对性的解决思路：

• 优先尝试官方自适应配置
  如果你用的是ReCaptcha v2，直接在渲染元素里加上data-size="compact"属性，谷歌会自动为小屏幕切换更紧凑的布局，这是最省心的原生适配方案：

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

• 用媒体查询配合缩放调整样式
  如果官方compact模式还是满足不了需求，或者你用的是其他版本，可以通过CSS媒体查询针对365px以下的屏幕做整体缩放+容器适配：

  /* 针对宽度小于365px的屏幕 */
  @media (max-width: 365px) {
    .comment_recaptcha {
      /* 给容器加内边距，避免内容溢出视口 */
      padding: 0 8px;
      /* 按比例缩小ReCaptcha，数值可以根据实际效果调整 */
      transform: scale(0.82);
      /* 把缩放原点设为左上角，防止元素偏移 */
      transform-origin: top left;
      /* 限制容器最大宽度，确保在小屏里不会撑破 */
      max-width: 280px;
      /* 保持居中对齐 */
      margin: 0 auto;
    }
  }
  

  这里的缩放比例可以根据你的实际显示效果微调，核心是通过transform: scale()整体缩小ReCaptcha，同时用transform-origin避免缩放后元素错位。

• 调整父级容器的溢出规则
  检查你的父级容器#insert_element的溢出设置，如果小屏里ReCaptcha被截断，可以给它加上：

  #insert_element {
    /* 允许横向滚动，保证用户能看到完整的ReCaptcha */
    overflow-x: auto;
    /* 或者如果你不想滚动，就用overflow-x: hidden配合上面的缩放方案 */
  }
  

这些方案我自己在项目里都试过，基本能解决小屏里ReCaptcha变形、溢出的问题，你可以按顺序试试哪个最适合你的场景~

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