휴대 기기에 맞는 CSS 스타일에서 데이터 입력을 허용하지 않는

Question

양식을 작성할 수 있도록 양식을 작성했지만 모바일 크기 (640, 480, 320) 그것은 나를 허용하지 않습니다. 나는 뭔가를 시도하여 뭔가를 발견하고 내 contactform div 안에있는 커서를 가지고 그 안에 양식이 있습니다. 그런 다음 탭을 사용하지 않고 div 외부에있는 경우 메시지 상자 이외의 모든 것을 입력 할 수 있습니다. 내가 이상하다고 생각하니? 당신이 640에 대해 480 모바일 레이아웃을 테스트하는 양식입니다

benlevywebdesign.com 페이지의 맨 아래이며, 여기에

(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

@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; 
    } 

Answer 1

(320) 내 CSS 스타일은 브라우저의 크기를 조정하고, PC (나는 FF를 사용하고 있습니다)에 여러분의 사이트를보고 시도했다가 알 간다 스크류의 종류. Firebug는 15 개의 오류와 10 개의 경고가 있다고 말하면 휴대 기기로 돌아 가기 전에 먼저 오류를 해결할 가치가 있습니다. Heres는

문제의 짧은 비디오 : http://screencast-o-matic.com/watch/clhwo4GGI