我正在使用谷歌recaptchav2,但在一些手机上验证按钮不可达。
我确定是因为left:161.68px在一个没有任何id和类的div上。
我怎样才能让它有反应?
可能对你有帮助。使用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一个高度和宽度。