web-dev-qa-db-ja.com

CAPTCHA reCAPTCHAサイズ変更なし

こんにちは、GoogleのNo CAPTCHA reCAPTCHAをWebサイトに追加したところ、小さな問題に直面しています。私のモバイルWebサイトには適合せず、それは大きな問題です。私は次のようなすべてを試しました：

HTML

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

CSS

#captchadisplay {
  width: 50% !important;
}

そして

CSS

.g-recaptcha {
  width: 50%;
}

しかし、私は自分のモバイルWebサイトでそれを縮小することはできないようです。何か案は？ :)

htmlcssrecaptcha
21
michael jones

CSStransformプロパティを使用することにより、全体scalereCAPTCHAの。

2つのインラインスタイルを追加するだけで、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/

39
Geek Goddess

Geek Goddess 'ソリューションの実装に成功しました。主な問題は、すべてのブラウザで動作しない可能性があることです。ただし、現在、Googleが提供する簡単なソリューションがあります。

ReCAPTCHAバージョン2.0には、ウィジェットの表示に関する新しいルールがあり、Googleはタグの属性を追加して、レンダリング方法を変更します。

タグdata-sizeは、デフォルトの"normal"と、モバイルデバイスの画面に収まる"compact"の値を取ることができます。これがコンパクトウィジェットの外観です。

new compact reCAPTCHA v2.0

見栄えの良いウィジェットではありませんが、他のソリューションよりも少ない作業で収まります。

その他の属性については、 GoogleのreCAPTCHA v2.0のドキュメント を確認してください

13
Security Aficionado

Style属性にtransform(0.77)を入れることは真にレスポンシブなソリューションではなかったため、私はいくつかのJQueryを使用してきました。

このメディアクエリを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は親コンテナーがどれだけ小さくても適切に縮小し、元の幅に最大幅があるかのように動作します。

メディアクエリは、画面サイズの変化を検出するメカニズムにすぎないことに注意してください。

9
AjaxLeung

Googleの documentation によると、data-size属性を設定することができ、これは私のために働いた。

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

しかし、@ GeekGoddessからの回答は、サイジングにおいてもう少し柔軟性を提供します。

5
L_7337

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で同じ要素に2回目にレンダリングできないためです。もっと良い方法はありますが、今のところ私が見つけたすべてです。

2
icetique

私にとっては、Google re-captcha 2.0のcompactモードの実装は不十分です。 looksいですね。

「オタクの女神」ソリューションから拡張するだけです。

次のことができます。

<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（DXImageTransformfor for IE <= 8）。

さらに、このtransform scaleとCSS max-widthを組み合わせることで、レスポンシブにすることができます。

完璧な方法ではありませんが、Googleから適切なレスポンシブフィックスを取得するまでは。

2
Felix

興味がある人のために、私は少し変更しました 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();
});
1
Cosmin

これがあなたの役に立つことを願っています

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

}
1
Avi E. Koenig

私のサイトでは、再キャプチャが途切れてしまい、悪く見えました。

enter image description here

いくつかの実験の後、このスタイルの更新でカットオフの問題を修正できました。

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

enter image description here

1
Dave

残念ながら、NoCaptchaはiframeを使用しているため、高さ/幅を制御し、overflow:hidden;超過分をカットします。最高の使いやすさのために、キャプチャの数ピクセル以上を切り捨てることはお勧めしません。

例：

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

サイズ変更の私のスピンは次のとおりです。

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

これがあなたのために働くことを願っています。

_<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"を追加するだけです

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>

これは私のために働いています、あなたはそれを試してください..

0
jakasaniya mohit