调整移动设备的 reCaptcha 大小/样式答案

【问题标题】：Resizing / Styling reCaptcha for mobile devices调整移动设备的 reCaptcha 大小/样式
【发布时间】：2017-07-18 18:17:07
【问题描述】：

我目前正在努力调整表单中 reCaptcha 元素的大小（或样式）。在移动设备上查看表单时（纵向），它有点悬而未决，看起来很草率。

表单来自 formstack 并由脚本呈现。我已经能够使用 CSS 为表单的所有其他元素设置样式，并使用 jQuery 为每个输入添加占位符属性，而不会出现任何问题。但是，一旦我进入 reCaptcha 块，这些选项似乎都不起作用。我已经能够直接在 Chrome 开发工具中进行更改以获得我想要的结果（或者一个可以工作的结果），但是一旦使用 CSS 或 jQuery 应用这些，都没有工作。我也看过these google recaptcha docs，但是这甚至不是同一种……而是this is what I'm working with。

所以，我不确定接下来要尝试什么或在哪里寻找解决方案。

我尝试定位单个元素并更改它们的大小，我尝试只从元素中删除背景，因为仅此一项就会使它看起来不那么“时髦”。

还有其他人遇到过类似的问题吗？如果需要代码，我会提供它，它只是由所述脚本呈现的相当多的代码。我知道如果没有它，我什至很难建议我哪里出错了，但我不确定是否有人能够建议另一种尝试？

谢谢！

【问题讨论】：

您所说的“移动设备上的表单 [...] 有点挂起”是什么意思？这是否意味着表单的一侧被切断，因为它超出了显示的右边缘或下边缘？

标签： jquery css forms recaptcha formstack

【解决方案1】：

使用 CSS 转换属性，您可以通过改变 reCAPTCHA 的整个比例来实现宽度的改变。

仅借助两种内联样式，您就可以使 reCAPTCHA 非常适合您的移动设备：

<div class="g-recaptcha" 
 data-theme="light" 
 data-sitekey="XXXXXXXXXXXXX" 
 style="transform:scale(0.77);transform-origin:0 0">

【讨论】：

我应该在什么元素上添加这个？在生成 html 中，该类没有预先存在的 div。
您必须在“脚本标签”中添加它。验证码可以在 Script 标签中自定义。您可以通过更改 $image_width 和 $image_height 来更改 CAPTCHA 的大小。可以通过更新 $characters_on_image 来更改 CAPTCHA 中的字符数。

【解决方案2】：

我用过这段代码

Line #147 - #150
            'theme' => $this->modx->getOption('recaptchaTheme',$scriptProperties,'clean'),
            'width' => $this->modx->getOption('recaptchaWidth',$scriptProperties,250),
            'height' => $this->modx->getOption('recaptchaHeight',$scriptProperties,150),
            'lang' => $this->modx->getOption('cultureKey',null,'en'),

example link

【讨论】：