响应地选择紧凑或正常大小的谷歌recaptcha答案

【问题标题】：Responsively select compact or normal sized google recaptcha响应地选择紧凑或正常大小的谷歌recaptcha
【发布时间】：2016-09-04 21:58:26
【问题描述】：

根据标题寻求帮助，以便能够在 768 像素时响应地让 Google 重新验证从 data-size="compact" 更改为 data-size="normal"。没有javascript可以吗？

验证码 HTML：

<div class="captcha_container">
<div class="g-recaptcha" data-sitekey="6Le8iBkTAAAAzeCvzZRO3FePZO" data-size="compact">
</div>
</div>

CSS：

.captcha_container{padding: 20px 0px 0px 0px; text-align: center;}

.g-recaptcha{ display: inline-block;}

【问题讨论】：

标签： javascript html css recaptcha

【解决方案1】：

您无法在不使用 javascript 的情况下更改 data-size，但如果您愿意，可以更改比例以适应新的屏幕宽度。

示例：

.g-recaptcha {
    -webkit-transform:scale(0.77);
    -ms-transform:scale(0.77);
    transform:scale(0.77);
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
}

以前有人问过这个问题，这里有一些有趣的答案： https://stackoverflow.com/a/29521983/6049581

【讨论】：

谢谢 Frits，我知道缩放选项，但试图用这种方法找到解决方案。它是一项新功能，目前没有关于此特定挑战的在线信息。
我明白了 :) 你避免使用 javascript 有什么特别的原因吗？
只是看看是否有任何 css 诡计。试图减少加载时间，但我已经有了一些功能。你能建议一种方法吗？
老实说，我的建议是坚持使用 CSS。 Google 似乎阻止使用 javascript 访问它的 dom 元素（请参阅：stackoverflow.com/a/28619922/6049581）
我还没有机会测试它，但我会尝试的 jQuery 应该是$('.g-recaptcha').attr('data-size', 'normal'); - 但是我怀疑这会起作用，因为谷歌使用了数据 -在插入 recaptcha iframe 之前将 size 作为参数。