Привет, я просто добавил 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%;
}
Тем не менее, я не могу сжимать его для своего мобильного сайта. Есть идеи?:)
Используя свойство CSS transform, вы можете добиться изменения ширины, изменив весь масштаб 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/
Я успешно внедрил решение Geek Goddess. Основная проблема заключается в том, что он может работать не во всех браузерах. Теперь, однако, есть простое решение, предоставленное Google.
В reCAPTCHA версии 2.0 появились новые правила отображения виджета и добавленные в Google атрибуты тегов, которые изменяют способ его отображения.
Тег data-size может принимать значения "normal", который является значением по умолчанию, и "compact", который подходит для экранов мобильных устройств. Вот так выглядит компактный виджет.
Это не самый красивый виджет, но он подходит с меньшим количеством работы, чем другие решения.
Для получения дополнительных атрибутов, проверьте документацию Google reCAPTCHA v2.0
Я использую 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 будет правильно масштабироваться независимо от того, насколько маленьким станет его родительский контейнер, и будет вести себя так, как если бы он имел максимальную ширину в своей первоначальной ширине.
Обратите внимание, что медиа-запрос - это просто механизм для обнаружения изменения размера экрана.
В соответствии с документация от Google показывает атрибут data-size, который можно установить, и это сработало для меня.
<div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>
Но ответ от @GeekGoddess дает немного большую гибкость в определении размеров.
Для меня реализация компактного режима Google re-captcha 2.0 просто хромает. Это выглядит уродливо.
Просто расширяется с решения "Geek Goddess".
Вы можете сделать следующее:
<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.
Если вам не нравится решение 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&onload=recaptchaCallback&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 не позволит вам сделать второй раз для того же элемента. Может быть, лучший способ, но все, что я нашел сейчас.
К сожалению, NoCaptcha использует iframe, поэтому вы можете контролировать высоту/ширину и использовать overflow:hidden;, чтобы отключить избыток. Я бы не рекомендовал отрезать больше, чем несколько пикселей Captcha за лучшее удобство использования.
Пример:
.g-recaptcha {
max-width: 300px;
overflow: hidden;
}
Для кого может быть интересно, я немного изменил решение 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();
});
На моем сайте перехват был отключен и выглядел плохо.
После некоторых экспериментов я смог исправить проблему отсечки с помощью этого обновления стиля:
<style>
.g-recaptcha>div>div>iframe {
width: 380px;
height: 98px;
}
</style>
Надеюсь, вы найдете это полезное
@media only screen and (max-width : 480px) {
.smallcaptcha{
transform:scale(0.75);
transform-origin:50% 50%;
}
}
Вот мой спин на изменение размера:
<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>
Надеюсь, это сработает для вас.
<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"
<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>
Это работает для меня, вы пытаетесь это..