无验证码 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 transform 属性，您可以通过更改 reCAPTCHA 的整个 scale 来实现更改宽度。

只需添加两种内联样式，您就可以使 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 添加了可以更改其呈现方式的标签属性。

标签

data-size

可以采用默认值

"normal"

和适合移动设备屏幕的

"compact"

值。这就是紧凑小部件的样子。

new compact reCAPTCHA v2.0

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

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

Answer 3

我一直在使用一些 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 都会正确缩小，并且其行为就像在其原始宽度上具有最大宽度一样。

请注意，媒体查询只是一种检测屏幕尺寸变化的机制。

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 的compact模式实现实在是蹩脚。看起来很丑。

只是从“极客女神”解决方案扩展而来。

您可以执行以下操作：

<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 获得适当的响应修复。

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

希望这对您有用。

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

对于可能感兴趣的人，我改变了一些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();
});

Answer 9

这是我对调整大小的看法：

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

Answer 10

不幸的是，NoCaptcha 使用 iframe，因此您最多可以控制高度/宽度并使用

overflow:hidden;

剪掉多余的部分。为了获得最佳可用性，我不建议切断验证码的几个像素以上。

示例：

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

Answer 11

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

经过一些实验，我能够通过此样式更新解决截止问题：

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

Answer 12

希望您觉得这很有用

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

}

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

0
投票

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

Answer 15

我找到了一种真正响应式实现来调整谷歌验证码元素大小的方法：

  function resizeCaptcha() {
    var captchaElem = document.getElementsByClassName("g-recaptcha")[0]

    var captchaWidth = captchaElem.children[0].offsetWidth;
    var parentWidth = captchaElem.parentElement.offsetWidth;

    captchaElem.style.transform = "scale(" + (parentWidth / captchaWidth) + ")";
    captchaElem.style.transformOrigin = "0 0";
  };

  grecaptcha.ready(resizeCaptcha);

  addEventListener("resize", (event) => {resizeCaptcha()});

无验证码 reCAPTCHA 调整大小

问题描述投票：0回答：15

15个回答

最新问题

无验证码 reCAPTCHA 调整大小

问题描述 投票：0回答：15

15个回答

最新问题

问题描述投票：0回答：15