0

全部、次の2ページあります。

最初のページにはreCaptchaがあり、携帯電話で表示すると、右側に大きなスペースができます(メインの灰色が右側に揃うはずです)。ここでリンクを表示できます:http: //tinyurl.com/9hj9y7j

2番目のページにはreCaptchaがなく、ページが右側にほぼ同じ高さの灰色でどのように表示されるかを確認できます:http: //tinyurl.com/cm5p4tg

reCaptchaを制御するための次のCSSコードがあります。

@media (max-width: 480px) {
    #recaptcha_image img {
        width: 250px;
    }
    #recaptcha_image {
        width: 250px;
    }
}

また、ユーザーがモバイルブラウザを使用しているかどうかに応じて、表示するreCaptchaのタイプを制御するために次のものがあります(http://code.google.com/p/php-mobile-detect/):

<?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を使用してスパムを阻止したいので、問題の解決策を見つける必要があります。

ありがとう!

4

0 に答える 0