Сделать адаптивную reCAPTCHA для сайта
 | |
| Возможно многие не догадывались, что капчи от Google reCAPTCHA, идет изначально не адаптивная, где на узком экране будет смотреться не корректно. Но теперь ее можно сделать адаптивной, и после чего, теперь она автоматически будет настраиваться под блок, где находится. Так для информации, как пишут, то ее ширина имеет 302 пикселя. А точнее про правильное и корректное отображение капчи reCAPTCHA на самых небольших экранах, и также если находится в узком блоке. В этой статье рассмотрим как сделать, чтобы код безопасности ReCaptcha от Google реагировал на разные размеры мобильных носителей, а точнее ширины экрана. Действительно, по умолчанию модуль проверки робота не «реагирует», то есть его размеры не адаптируются к его окружению. Теперь, чтобы идти дальше, вы можете добавить пересчет этого значения шкалы, когда мобильный телефон переходит в альбомный или портретный, или когда изменяется ширина экрана. Кроме того, может потребоваться учитывать маржу или отступы, влияющие на доступную ширину.  Новая версия «noCaptcha» ReCaptcha очень удобна в использовании и интеграции, но не адаптируется ко всем ситуациям, включая мобильные носители. Здесь нам поможет простой JS кодом с библиотекой jQuery. Код $(function() { var reCaptchaWidth = 302; var containerWidth = $('.container').width(); if(reCaptchaWidth > containerWidth) { var reCaptchaScale = containerWidth / reCaptchaWidth; $('.g-recaptcha').css({ 'transform':'scale('+reCaptchaScale+')', 'transform-origin':'left top' }); } }); Осталось немного, это поместить капчу в сам блок, которому закреплен класс container, где после этого, все станет отлично показывать. Где уже сама капча отлично будет смотреться на всех гаджетах, где если идет уменьшение экрана, то автоматически происходит масштабирование. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |