如何在小屏设备调整reCAPTCHA的data-size并强制重渲染？

你遇到的核心问题是：reCAPTCHA只会在首次初始化时读取data-size这类属性，后续修改DOM属性完全不会触发它重新渲染组件。要解决这个问题，必须使用reCAPTCHA官方提供的JS API手动控制渲染与销毁流程。

最优解决方案：手动控制reCAPTCHA渲染 #

1. 修改HTML结构 #

移除自动渲染的g-recaptcha类，改用普通容器（避免reCAPTCHA自动初始化）：

<div id="recaptcha-container"></div>

2. 重写JavaScript逻辑 #

通过grecaptcha.render()初始化组件，保存实例ID用于后续销毁，配合窗口resize事件动态切换size：

document.addEventListener('DOMContentLoaded', () => {
    const recaptchaContainer = document.getElementById('recaptcha-container');
    let recaptchaId = null;
    const siteKey = '6LeWllEnAAAAALdycq7AIRWIf-CS_JOwcwHZvzLF';

    // 防抖函数：避免resize频繁触发渲染操作
    function debounce(func, delay = 200) {
        let timeoutId;
        return (...args) => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    }

    // 渲染/重新渲染reCAPTCHA
    function renderRecaptcha(size) {
        // 销毁已有实例（如果存在）
        if (recaptchaId) {
            grecaptcha.destroy(recaptchaId);
        }
        // 用指定size重新渲染
        recaptchaId = grecaptcha.render(recaptchaContainer, {
            sitekey: siteKey,
            size: size
        });
    }

    // 根据窗口尺寸切换size
    function updateRecaptchaSize() {
        const targetSize = window.innerWidth <= 530 ? 'compact' : 'normal';
        renderRecaptcha(targetSize);
    }

    // 页面加载时初始化
    updateRecaptchaSize();

    // 绑定防抖后的resize事件
    window.addEventListener('resize', debounce(updateRecaptchaSize));
});

关键说明 #

• 确保页面已加载reCAPTCHA的官方脚本（通常是<script src="https://www.google.com/recaptcha/api.js" async defer></script>）
• 防抖函数是必要的：窗口resize事件会频繁触发，直接调用渲染会导致性能问题，防抖可以合并短时间内的多次触发
• 这种方式完全遵循官方API规范，比修改DOM属性更稳定可靠

备选方案：CSS适配（效果有限） #

如果你不想频繁销毁重建组件，可以尝试用CSS媒体查询调整容器样式，但由于reCAPTCHA的iframe是跨域的，无法修改内部元素样式，只能做外层适配：

@media (max-width: 530px) {
    #recaptcha-container {
        width: 100%;
        overflow: hidden;
        /* 若必须缩放，可配合transform，但注意内边距问题 */
        /* transform: scale(0.9); */
        /* transform-origin: left top; */
    }
}

不过这种方式无法替代官方compact模式的原生适配效果，仅作为临时备选。

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