全部,我有以下两页。
第一页上有一个 reCaptcha,当我在手机上查看它时,它会在右侧产生很大的空间(主灰色应与右侧对齐)。您可以在此处查看链接:http: //tinyurl.com/9hj9y7j
第二页上没有 reCaptcha,您可以看到页面如何显示,灰色几乎与右侧齐平:http: //tinyurl.com/cm5p4tg
我有以下 CSS 代码来控制 reCaptcha:
@media (max-width: 480px) {
#recaptcha_image img {
width: 250px;
}
#recaptcha_image {
width: 250px;
}
}
根据用户是否使用移动浏览器( http://code.google.com/p/php-mobile-detect/),我还有以下控制要显示的 reCaptcha 类型:
<?php
if ($detect->isMobile()) {
?>
<tr><td valign="top" colspan="2">
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span><br>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span><br>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
<div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
<div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
</div>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=<?php echo $publickey; ?>">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=<?php echo $publickey; ?>"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
<?php
}else{
?>
<tr><td width="100" valign="top">Prevent Spam:</td><td>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'white'
};
</script>
<?php
echo recaptcha_get_html($publickey);
}
?>
<div id="captchaStatus"></div>
<input type="text" value="" name="fill_me_out" id="fill_me_out" /></td></tr>
我还有以下代码来控制视口:
<meta name="viewport" content="width=device-width, maximum-scale=1" />
有谁知道为什么 reCaptcha 会导致页面显示与页面不存在时不同?
我真的很想使用 reCaptcha 来阻止垃圾邮件,所以需要找到解决问题的方法。
谢谢!