淘先锋技术网

首页 1 2 3 4 5 6 7

我正在使用谷歌recaptchav2,但在一些手机上验证按钮不可达。

google recaptcha v2

我确定是因为left:161.68px在一个没有任何id和类的div上。

enter image description here

我怎样才能让它有反应?

可能对你有帮助。使用jquery添加类。(可以请你分享一下这个页面的链接吗?)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("iframe").parents("div").addClass('g-active');
    });
    </script>

虽然不是最理想的解决方案,但是可以使用z-index作为CSS选择器中的唯一标识符来样式化recaptcha包装器,并覆盖位置和布局以适合移动设备;

/* Reposition RecaptchaV2 on mobile using z-index as selector */

@media (max-width: 575px) {
  div[style*='z-index: 2000000000;'] {
    left: 0 !important;
    right: 0 !important;
    top: 1rem !important;
    padding-bottom: 2rem;
    display: flex;
    justify-content: center;
    border-radius: 12px
  }

  /* Hide the bubble arrow */
  .g-recaptcha-bubble-arrow {
    display: none !important;
  }
}

注意:考虑用一个不同的值替换整个代码库中使用的这个特定的z索引。

如果你没有给这个元素一个id,那么你可以在js文件中给出一个条件,比如如果div元素的宽度大于vw(视窗宽度),那么根据移动宽度设置宽度,否则给这个div一个高度和宽度。