你好，我刚刚在我的网站上添加了Google的无验证码reCAPTCHA，但是我遇到了一个小问题。它在我的移动网站上显示不全，这是一个很大的问题。我已经尝试了所有可能的解决方法，例如：
HTML
<div id="captchadisplay">
<div class="g-recaptcha" data-sitekey="???"></div>
</div>
CSS
#captchadisplay {
width: 50% !important;
}
和
CSS
.g-recaptcha {
width: 50%;
}
但我似乎无法将它缩小到适合我的移动网站。有什么想法？ :)
<div class="g-recaptcha"
data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>
更多细节可以在我的网站上找到：https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
.scale(0.77) 在所有带有原始转换功能的浏览器上都有效。 - SliverNinja - MSFT我成功地实现了Geek Goddess的解决方案。主要问题是它可能无法在所有浏览器上运行。然而，现在谷歌提供了一个简单的解决方案。
使用reCAPTCHA 2.0版本，有新的小部件显示规则，并且谷歌添加了标记属性来改变其呈现方式。
标签data-size可以采用值"normal"，这是默认值，以及"compact"，适合移动设备屏幕。这就是紧凑型小部件的外观。
虽然它不是最好看的小部件，但它比其他解决方案需要更少的工作。
如需更多属性信息，请查看谷歌reCAPTCHA v2.0文档
我一直在使用一些JQuery，因为将transform(0.77)放入样式属性中并不是一个真正响应式的解决方案。
我在我的CSS中添加了这个媒体查询，其中最大宽度是ReCaptcha框被认为过大的阈值：
@media(max-width: 390px) {
.g-recaptcha {
margin: 1px;
}
}
然后我添加了这个 JQuery：
$(window).resize(function() {
var recaptcha = $(".g-recaptcha");
if(recaptcha.css('margin') == '1px') {
var newScaleFactor = recaptcha.parent().innerWidth() / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
}
else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
}
});
如果未进行样式设置，则我使用的304是ReCaptcha框的默认宽度。
现在，无论其父容器变得多小，ReCaptcha都会正确缩小，并且它的行为就像其原始宽度具有最大宽度一样。
请注意，媒体查询只是检测屏幕大小更改的机制。
data-size属性来实现技术相关内容的翻译，这对我很有效。 <div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>
然而，@GeekGoddess的答案提供了更多的尺寸灵活性。
对我来说，Google re-captcha 2.0的“紧凑”模式实现非常糟糕。看起来很丑。
可以按照“极客女神”的解决方案进行扩展。
你可以采取以下措施：
<div class="g-recaptcha" data-sitekey="..." style="-moz-transform:scale(0.77); -ms-transform:scale(0.77); -o-transform:scale(0.77); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand');"></div>
这将在几乎所有浏览器中调整大小，如IE，Chrome，FF，Opera（ DXImageTransform 适用于IE <= 8）。
此外，我们可以通过将此转换缩放与CSS最大宽度结合使用，使其响应式。
虽然不是完美的方法，但在我们从Google获得适当的响应式修复之前，可以使用它。
<div>
<div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>
首先，您需要明确加载gRecaptcha 2并提供onload回调函数：
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&onload=recaptchaCallback&render=explicit'>
function recaptchaCallback()
{
var mq = window.matchMedia("(max-width: 400px)");
mq.addListener(recaptchaRenderer);
recaptchaRenderer(mq);
}
function recaptchaRenderer(mq)
{
var recaptcha = $('.g-recaptcha').eq(0);
var data = recaptcha.data();
var parent = recaptcha.parent();
recaptcha.empty().remove();
var recaptchaClone = recaptcha.clone();
parent.append(recaptchaClone);
recaptchaClone.data(data);
var options = {
'sitekey': data['sitekey'],
'size': 'compact'
};
if(!mq.matches)
{
options['size'] = 'normal';
}
grecaptcha.render(recaptchaClone.get(0), options);
}
<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX" style="transform:scale(0.77);transform-origin:0 0"></div>
只需添加 style="transform:scale(0.77);transform-origin:0 0"
对于可能感兴趣的人，我稍微修改了AjaxLeung的解决方案，并提出了以下建议：
function resizeReCaptcha() {
if ($(".g-recaptcha").length) {
var recaptcha = $(".g-recaptcha");
recaptcha.parent().addClass('col-xs-12 padding0');
var innerWidth = recaptcha.parent().innerWidth();
if (innerWidth < 304) {
var newScaleFactor = innerWidth / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('-webkit-transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
} else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('-webkit-transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
}
}
}
$(window).resize(function() {
resizeReCaptcha();
});
$(document).ready(function () {
resizeReCaptcha();
});
以下是我对调整大小的看法：
<script>
function resizeReCaptcha() {
var width = $( ".g-recaptcha" ).parent().width();
if (width < 302) {
var scale = width / 302;
} else {
var scale = 1;
}
$( ".g-recaptcha" ).css('transform', 'scale(' + scale + ')');
$( ".g-recaptcha" ).css('-webkit-transform', 'scale(' + scale + ')');
$( ".g-recaptcha" ).css('transform-origin', '0 0');
$( ".g-recaptcha" ).css('-webkit-transform-origin', '0 0');
};
$( document ).ready(function() {
$( window ).on('resize', function() {
resizeReCaptcha();
});
resizeReCaptcha();
});
</script>
@media only screen and (max-width : 480px) {
.smallcaptcha{
transform:scale(0.75);
transform-origin:50% 50%;
}
}