我正在使用谷歌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一個高度和寬度。