没有CAPTCHA reCAPTCHA调整大小

Question

嗨,我刚刚在我的网站上添加了Google的No CAPTCHA reCAPTCHA,我遇到了一个小问题.它不适合我的移动网站,这是一个巨大的问题.我尝试了一切如下:

HTML

<div id="captchadisplay">
  <div class="g-recaptcha" data-sitekey="???"></div>
</div>

CSS

#captchadisplay {
  width: 50% !important;
}

和

CSS

.g-recaptcha {
  width: 50%;
}

但我似乎无法将其缩小为我的移动网站.有任何想法吗？:)

Answer 1

通过使用CSS转换属性,您可以通过更改reCAPTCHA的整个比例来实现更改宽度.

通过添加两种内联样式,您可以使reCAPTCHA非常适合您的移动设备:

<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/

Answer 2

我成功实施了Geek Goddess的解决方案.它的主要问题是它可能无法在所有浏览器上运行.但是,现在Google提供了一个简单的解决方案.

使用reCAPTCHA 2.0版,有一些新的规则可以显示窗口小部件和谷歌添加的标记属性,这些属性会改变它的呈现方式.

标签数据大小可以采用"正常"的值,这是默认值,而"紧凑"则适合移动设备屏幕.这就是紧凑小部件的样子.

它不是最好看的小部件,但它比其他解决方案更少的工作.

有关更多属性,请查看Google的reCAPTCHA v2.0文档

Answer 3

我一直在使用一些JQuery,因为放入transform(0.77)style属性并不是一个真正的响应式解决方案.

我在我的CSS中添加了这个媒体查询,其中max-width是一旦传递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将适当缩小,无论其父容器变得多么小,它的行为就像它的原始宽度最大宽度一样.

请注意,媒体查询只是一种检测屏幕大小更改的机制.

Answer 4

根据Google 的文档显示了一个data-size可以设置的属性,这对我有用.

 <div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>

但是,@ GeekGoddess的答案在调整大小时提供了更多的灵活性.

Answer 5

不幸的是，NoCaptcha 使用 iframe，因此您最多可以控制高度/宽度并用于overflow:hidden;切断多余的部分。为了获得最佳可用性，我不建议切断验证码的几个像素以上。

例子：

.g-recaptcha {
max-width: 300px;
overflow: hidden;
}