wake-up-neo.net

Keine CAPTCHA reCAPTCHA Größenänderung

Hallo, ich habe gerade Google's No CAPTCHA reCAPTCHA zu meiner Website hinzugefügt, und ich habe ein kleines Problem. Es passt NICHT auf meine mobile Website, und das ist ein RIESIGES Problem. Ich habe alles ausprobiert wie:

HTML

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

CSS

#captchadisplay {
  width: 50% !important;
}

und

CSS

.g-recaptcha {
  width: 50%;
}

Trotzdem kann ich es für meine mobile Website nicht zu schrumpfen scheinen. Irgendwelche Ideen? :)

20
michael jones

Mit der CSS-Transformationseigenschaft können Sie die Breite ändern, indem Sie die gesamte Skalierung des reCAPTCHA ändern.

Durch Hinzufügen von nur zwei Inline-Styles können Sie den reCAPTCHA auf Ihrem mobilen Gerät gut anpassen:

<div class="g-recaptcha" 
     data-theme="light" 
     data-sitekey="XXXXXXXXXXXXX" 
     style="transform:scale(0.77);transform-Origin:0 0">
</div>`

Weitere Informationen finden Sie hier: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

39
Geek Goddess

Ich habe erfolgreich Geek Goddess 'Lösung implementiert. Das Hauptproblem dabei ist, dass es möglicherweise nicht auf allen Browsern funktioniert. Nun gibt es jedoch eine einfache Lösung von Google.

Mit der reCAPTCHA-Version 2.0 gibt es neue Regeln für die Anzeige der Widget- und von Google hinzugefügten Tag-Attribute, die die Art der Darstellung ändern.

Die Tag-Datengröße kann die Werte von "normal" (Standardeinstellung) und "compact" (für Bildschirme von Mobilgeräten) annehmen. So sieht das kompakte Widget aus.

new compact reCAPTCHA v2.0

Es ist nicht das bestaussehende Widget, aber es passt zu weniger Arbeit als die anderen Lösungen.

Weitere Attribute finden Sie in reCAPTCHA v2.0-Dokumentation von Google

13

Ich habe etwas JQuery verwendet, da transform(0.77) im style-Attribut keine wirklich ansprechende Lösung war.

Ich füge diese Medienabfrage in meinem CSS hinzu, wobei die maximale Breite der Schwellenwert ist, bei dem das ReCaptcha-Feld als zu groß betrachtet wird, sobald es übergeben wurde:

@media(max-width: 390px) {
    .g-recaptcha {
        margin: 1px;
    }
}

Ich füge dann diese JQuery hinzu:

$(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');
    }
});

Das 304, das ich verwende, ist die Standardbreite der ReCaptcha-Box, wenn nicht markiert.

Jetzt wird das ReCaptcha richtig verkleinert, unabhängig davon, wie klein der übergeordnete Container wird, und es verhält sich so, als hätte es bei seiner ursprünglichen Breite eine maximale Breite.

Beachten Sie, dass die Medienabfrage lediglich ein Mechanismus zum Erkennen einer Änderung der Bildschirmgröße ist.

9
AjaxLeung

Laut documentation von Google wird ein data-size-Attribut angezeigt, das gesetzt werden kann und das hat für mich funktioniert.

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

Die Antwort von @GeekGoddess bietet jedoch etwas mehr Flexibilität bei der Größenbestimmung.

5
L_7337

Wenn Sie die CSS-Lösung nicht mögen, können Sie es mit dem JS versuchen.

Die Idee ist, dynamisch zwischen dem kompakten und dem normalen Modus des Recaptcha-Plugins umzuschalten.

Ich werde ein Beispiel mit jQuery an Bord geben, aber es sollte nicht viel sein, um es auf reines JS zu portieren.

Ich gehe davon aus, dass Sie folgenden HTML-Code auf der Website haben.

<div>
    <div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>

Zunächst müssen Sie gRecaptcha 2 explizit laden und onload callback angeben:

<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&#038;onload=recaptchaCallback&#038;render=explicit'>

Als nächstes erstellen Sie Ihre Rückruffunktion, die auch Ihre Javascript-Medienabfrage sein wird.

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

Das letzte ist, das Recaptcha-Widget zu rendern.

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);
}

Sie fragen sich vielleicht, warum ich das div leeren und den gesamten g-Recaptcha-Inhalt klonen würde. Dies liegt daran, dass Sie mit gRecaptcha 2 nicht das zweite Mal auf dasselbe Element rendern lassen. Es könnte einen besseren Weg geben, aber es ist alles, was ich im Moment gefunden habe.

2
icetique

Für mich ist die compactmode-Implementierung von Google re-captcha 2.0 nur lahm. Es sieht hässlich aus. 

Ausgehend von der "Geek Goddess" -Lösung. 

Sie können Folgendes tun:

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

Dies wird für fast alle Browser IE, Chrome, FF, Opera (DXImageTransform gilt für IE <= 8).

Darüber hinaus können wir es ansprechen, indem Sie diese Transformationsskala mit CSS-max-width kombinieren.

Es ist nicht der perfekte Weg, aber bis wir die richtige Antwort von Google erhalten. 

2
Felix

Für Interessierte habe ich eine kleine AjaxLeung -Lösung geändert und mir folgendes ausgedacht:

 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();
});
1
Cosmin

Ich hoffe, Sie finden das nützlich

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

}
1
Avi E. Koenig

Auf meiner Website wurde das Re-Captcha abgeschnitten und sah schlecht aus.

 enter image description here

Nach einigen Experimenten konnte ich das Cutoff-Problem mit diesem Stil-Update beheben:

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

 enter image description here

1
Dave

Leider verwendet NoCaptcha einen iframe, so dass Sie höchstens die Höhe/Breite steuern und mit overflow:hidden; den Überschuss abschneiden können. Ich würde nicht empfehlen, mehr als ein paar Pixel des Captcha abzutrennen, um eine optimale Benutzerfreundlichkeit zu erreichen.

Beispiel:

.g-recaptcha {
max-width: 300px;
overflow: hidden;
}
1
Amy Brown Cole

Hoffe, das funktioniert für dich.

<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX" style="transform:scale(0.77);transform-Origin:0 0"></div>

Fügen Sie einfach style="transform:scale(0.77);transform-Origin:0 0" hinzu.

0
Sumit Nayak
<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>

Das funktioniert für mich, du versuchst es ..

0

Hier ist meine Neigung zur Größenänderung:

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