ID | post_title | author | post_excerpt | layout | permalink | published | post_date |
---|---|---|---|---|---|---|---|
6323 |
Google reCaptcha Responsive(Uyumlu) Tasarım Problemi
|
Oral ÜNAL |
post |
true |
2017-01-22 18:31:12 -0800 |
Google reCaptcha aldınız sitenize koydunuz. Tarayıcı ile görüntülediğiniz de hiç bir problem görmediniz. Temanız uyumlu, birde değişikliklere mobil cihazınızdan baktınız ve o da ne?! Google reCaptcha kutunun dışına taşıyor. Şu anda fixlemek üzere olduğum bir durum aynı zamanda.
İlk olarak aşağıdaki CSS kodu'nu CSS dosyanıza ekleyin:
.g-recaptcha { transform-origin: left top; -webkit-transform-origin: left top; }
Daha sonra JavaScript dosyanıza aşağıdaki kodu ekleyin:
// Google reCaptcha Uyumluluk Çözümü function uyumluReCaptcha() { // reCaptcha'nın genişliği var reCaptchaGen = 304; // reCaptcha'nın içinde olduğu kutunun genişliği var kapsulGen = $('.g-recaptcha').parent().width(); if(reCaptchaGen > kapsulGen) { // Oranlarını hesaplayalım var oran = kapsulGen / reCaptchaGen; // Elde ettiğimiz orana göre yeniden ölçekleyelim $('.g-recaptcha').css({ 'transform':'scale('+oran+')' }); } } $(function() { // Ölçekleme işlemini yapalım uyumluReCaptcha(); /** * Pencere boyutu değiştiği anda tekrar ölçekleyelim * throttle kütüphanesi * https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js */ $(window).resize( $.throttle( 100, uyumluReCaptcha ) ); });
Çalışan demo için buraya tıklayınız. Kolay gelsin,