2

そのため、デスクトップ サイズではフォームに入力できますが、モバイル サイズ (640、480、および 320) でフォームに入力する必要がある場合は、入力できません。試してみて何かを見つけたのですが、たまたまカーソルがcontactformdivの外にあり、その中にフォームがあります。次に、タブを使用してまだdivの外にいない限り、メッセージボックス以外のすべてを入力できます。私はそれが奇妙だと思いますか？

benlevywebdesign.com ページの下部には、640、480、および 320 のモバイル レイアウトをテストするためのフォームがあります。

お問い合わせフォームはこちら

<form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">    

        <fieldset>
            <p class="form">
                <label for="name">Name</label>
                <input type="text" name="name" id="name" size="30" />
            </p>
            <p class="form">
                <label for="email">Email</label>
                <input type="text" name="email" id="email" size="30" />
            </p>
            <p class="form">
                <label for="web">Website</label>
                <input type="text" name="web" id="web" size="30" />
            </p>            
        </fieldset>
        <fieldset>                                                                          
            <p class="form">
                <label for="message">Message</label>
                <textarea name="message" id="message" cols="30" rows="10"></textarea>
            </p>                                
        </fieldset>                 

        <p class="submit"><button name="submit" type="submit">Send</button></p>

    </form>

これが480と320のCSSスタイルです

@media screen and (max-width:480px){

@media screen and (max-width:320px){


#form1{
    padding-top:5px;
    }

#form1 fieldset{
    margin:0;
    padding:0;
    border:none;    
    float:left;
    display:inline;
    width:190px;
    margin-left:15px;
    }

#form1 legend{display:none;}    
#form1 p{margin:.5em 0;}    
#form1 label{display:block;}    
#form1 input, #form1 textarea{      
    width:175px;
    border:1px solid #B7B7B7;
    background:#fff;
    padding:3px;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    }   

#form1 textarea{
    height:120px;
    width:175px;
    overflow:auto;
    }   

#form1 p.submit{
    clear:both;
    padding:0 25px 5px 25px;
    margin:0;
    text-align:right;
    }   

#form1 button{
    font-family:Trebuchet MS;
    font-size:14px;
    width:105px;
    height:35px;        
    border:none;
    background-color:#484749;
    color:#fff;
    border-radius:4px;
    cursor:pointer;
    text-align:center;
    }
4

1 に答える 1

1

ブラウザのサイズを変更して、PC でサイトを表示しようとしたことがありますか (私は FF を使用しています)。また、Firebug は、15 個のエラーと 10 個の警告があると言っています。モバイル デバイスに戻る前に、まずこれらを修正してみる価値があるかもしれません。

問題の短いビデオがあります: http://screencast-o-matic.com/watch/clhwo4GGI

于 2012-05-31T15:26:41.993 に答える