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);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添加的标记属性，这些属性会改变它的呈现方式。

标签数据大小可以采用“普通”的值，这是默认值，“紧凑”，适合移动设备屏幕。这就是紧凑小部件的样子。

new compact reCAPTCHA v2.0

它不是最好看的小部件，但它比其他解决方案更少适合工作。

有关更多属性，请查看Google's reCAPTCHA v2.0 documentation

Answer 3

我一直在使用一些JQuery，因为在样式属性中放置transform(0.77)并不是真正的响应式解决方案。

我在我的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的documentation显示的data-size属性可以设置，这对我有用。

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

但是，@ GeekGoddess的答案在调整大小方面提供了更多的灵活性。

Answer 5

对我而言，Google re-captcha 2.0的紧凑型模式实施只是蹩脚。它看起来很难看。

从Geek Goddess＆＃34; Geek Goddess＆＃34;解。

您可以执行以下操作：

<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＆lt; = 8）。

我们还可以通过将转换比例与CSS max-width相结合来使其响应。

这不是完美的方式，但在我们从Google获得适当的响应式修复之前。

Answer 6

如果您不喜欢CSS解决方案，可以试试JS。

这个想法是在recaptcha插件的紧凑模式和普通模式之间动态切换。

我将在板上提供一个jQuery示例，但将它移植到纯JS应该不会太多。

我假设您在网站上有以下HTML代码。

<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&#038;onload=recaptchaCallback&#038;render=explicit'>

接下来，创建您的回调函数，该函数也将是您的javascript媒体查询。

function recaptchaCallback()
{
    var mq = window.matchMedia("(max-width: 400px)");
    mq.addListener(recaptchaRenderer);
    recaptchaRenderer(mq);
}

最后一件事是渲染recaptcha小部件。

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并克隆所有g-recaptcha内容。这是因为gRecaptcha 2不允许你第二次渲染到同一个元素。可能有更好的方法，但这是我现在找到的全部内容。

Answer 7

不幸的是，NoCaptcha使用iframe，因此最多可以控制高度/宽度，并使用overflow:hidden;来切断多余的。我不建议切掉Captcha的几个像素以获得最佳可用性。

示例：

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

Answer 8

对于可能感兴趣的人，我改变了一点AjaxLeung解决方案并提出了这个问题：

iterator

Answer 9

在我的网站上，重新验证码被切断并且看起来很糟糕。

经过一些实验，我能够通过这种样式更新修复截止问题：

<style>
  .g-recaptcha>div>div>iframe {
     width: 380px;
     height: 98px;
  }
</style>

Answer 10

Hope you find this useful

@media only screen and (max-width : 480px) {
    .smallcaptcha{
        transform:scale(0.75);
        transform-origin:50% 50%;
    }

}

Answer 11

<div class="g-recaptcha" data-theme="dark"></div>

Answer 12

希望这适合你。

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

即可

Answer 13

<div class="g-recaptcha" data-theme="light" data-sitekey="your site key" style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>

这对我有用，你试试吧..

Answer 14

这是我调整尺寸的时间：

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

没有CAPTCHA reCAPTCHA调整大小

14 个答案: