Nein CAPTCHA reCAPTCHA Ändern der Größe

Question

Hallo, ich habe gerade Googles No CAPTCHA reCAPTCHA auf meiner Website hinzugefügt, und ich stoße auf ein kleines Problem. Es passt NICHT auf meine mobile Website, und das ist ein großes Problem. Ich habe alles versucht, wie:

HTML 

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

CSS 

#captchadisplay { 
    width: 50% !important; 
} 

und

CSS 

.g-recaptcha { 
    width: 50%; 
} 

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

Answer 1

Leider verwendet NoCaptcha einen iframe, so dass Sie höchstens die Höhe/Breite steuern und overflow:hidden; verwenden können, um den Überschuss zu schneiden. Ich würde nicht empfehlen, mehr als ein paar Pixel des Captchas für die beste Benutzerfreundlichkeit abzutrennen.

Beispiel:

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

Answer 2

die CSS Eigenschaft trans Durch die Verwendung können Sie die Breite zu ändern erreichen, indem die gesamte Skala des reCAPTCHA zu verändern.

von in nur zwei Inline-Styles hinzugefügt haben, können Sie die reCAPTCHA fit schön auf Ihrem Mobilgerät machen:

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

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

Answer 3

Hoffnung das funktioniert für Sie.

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

Answer 4

ich einige JQuery verwendet haben, da transform(0.77) im Stil-Attribut setzen nicht eine wirklich ansprechende Lösung.

ich diese Medien Abfrage in meinem CSS hinzufügen, mit dem max-width die Schwelle zu sein, wo die ReCaptcha Box zu groß betrachtet wird einmal durchlaufen:

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

ich dann hinzufügen, um dieses 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'); 
    } 
}); 

Die 304, die ich verwende, ist die Standardbreite der ReCaptcha-Box, wenn unstyled.

Jetzt wird der ReCaptcha richtig herunterskalieren, egal wie klein sein übergeordneter Container wird, und er verhält sich so, als hätte er eine maximale Breite in seiner ursprünglichen Breite.

Beachten Sie, dass die Medienabfrage einfach ein Mechanismus zum Erkennen einer Bildschirmgrößenänderung ist.

Answer 5

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

Mit reCAPTCHA Version 2.0 gibt es neue Regeln für die Anzeige des Widgets und Google hinzugefügt Tag-Attribute, die die Art ändern, wie es gerendert wird.

Die Größe der Tag-Daten kann die Werte von "normal" annehmen, was die Standardeinstellung ist, und "kompakt", die in Bildschirme von mobilen Geräten passt. So sieht das kompakte Widget aus.

Es ist nicht die am besten aussehende Widget, aber sie paßt mit weniger Arbeit als die anderen Lösungen.

Weitere Attribute, überprüfen Google's reCAPTCHA v2.0 documentation

Answer 6

Für mich ist die kompakte Modus Implementierung von Google Re-Captcha 2.0 ist nur lahm. Es sieht hässlich aus.

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

, dass fast alle Browser IE Größe ändern auf wird, Chrome, FF, Opera (DXImageTransform ist für IE < = 8).

Weiter können wir es reaktionsfähig machen, indem wir diese Transformationsskala mit CSS max-width kombinieren.

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

Answer 7

Nach der documentation von Google zeigt ein data-size Attribut, das eingestellt werden kann und das hat für mich funktioniert.

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

Aber die Antwort von @GeekGoddess bietet ein wenig mehr Flexibilität bei der Dimensionierung.

Answer 8

Für die interessiert sein könnten, änderte ich ein wenig AjaxLeung Lösung und kam mit dieser:

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

Wenn Sie die CSS-Lösung nicht gefällt, können Sie die JS versuchen.

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

Ich werde ein Beispiel mit jQuery onboard liefern, aber es sollte nicht viel sein, es auf reines JS zu portieren.

Ich nehme an, Sie haben folgenden HTML-Code auf der Website.

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

Zunächst müssen Sie gRecaptcha 2 ausdrücklich und bieten onload Rückruf laden:

<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 Callback-Funktion, die auch sein wird, Ihr Javascript Medienabfrage.

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

Die letzte Sache ist, das recaptcha Widget zu rendern.

Sie wundern sich vielleicht, warum ich das div entleere und den ganzen g-recaptcha Inhalt kloniere. Das liegt daran, dass gRecaptcha 2 das zweite Mal nicht zum selben Element rendern würde. Es könnte einen besseren Weg geben, aber es ist alles, was ich für jetzt gefunden habe.

Answer 10

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

Nach einigen Experimenten konnte ich die Cutoff-Problem mit dieser Art Update beheben:

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

Answer 11

Hoffe, dass Sie dies nützlich finden

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

}