如果您不喜欢CSS解决方案,可以尝试JS。
该想法是动态切换recaptcha插件的紧凑模式和正常模式。
我将提供一个带有jQuery的示例,但将其移植到纯JS应该不难。
我假设您在网站上有以下HTML代码。
<div>
<div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>
首先,您需要明确加载gRecaptcha 2并提供onload
回调函数:
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&onload=recaptchaCallback&render=explicit'>
接下来,创建回调函数,该函数也将充当您的 JavaScript 媒体查询。
function recaptchaCallback()
{
var mq = window.matchMedia("(max-width: 400px)");
mq.addListener(recaptchaRenderer);
recaptchaRenderer(mq);
}
最后一步是渲染reCAPTCHA小部件。
function recaptchaRenderer(mq)
{
var recaptcha = $('.g-recaptcha').eq(0);
var data = recaptcha.data();
var parent = recaptcha.parent();
recaptcha.empty().remove();
var recaptchaClone = recaptcha.clone();
parent.append(recaptchaClone);
recaptchaClone.data(data);
var options = {
'sitekey': data['sitekey'],
'size': 'compact'
};
if(!mq.matches)
{
options['size'] = 'normal';
}
grecaptcha.render(recaptchaClone.get(0), options);
}
你可能会想为什么我要清空div并克隆所有g-recaptcha内容。这是因为gRecaptcha 2不允许你在同一元素上第二次渲染。也许有更好的方法,但目前这是我找到的唯一方法。