Question

<!-- Main -->
<div id="main-wrapper">
    <div class="container">
        <div id="content">
            <article>
                <!-- Form Code Start -->
                <form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
                    <fieldset>
                        <legend>Contact us</legend>
                    
                        <input type='hidden' name='submitted' id='submitted' value='1'/>
                        <input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
                        <input type='text2'  class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
                    
                        <div class='short_explanation'>* required fields</div>
                    
                        <div>
                            <span class='error'>
                                <?php echo $formproc->GetErrorMessage(); ?>
                            </span>
                        </div>
                        <div class='container2'>
                            <label for='name' >Your Full Name*: </label><br/>
                            <input type='text2' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/>
                            <span id='contactus_name_errorloc' class='error'></span>
                        </div>
                        <div class='container2'>
                            <label for='email' >Email Address*:</label><br/>
                            <input type='text2' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/>
                            <span id='contactus_email_errorloc' class='error'></span>
                        </div>
                        <div class='container2'>
                            <label for='phone' >Phone Number:</label><br/>
                            <input type='text2' name='phone' id='phone' value='<?php echo $formproc->SafeDisplay('phone') ?>' maxlength="15" /><br/>
                            <span id='contactus_phone_errorloc' class='error'></span>
                        </div>
                        <div class='container2'>
                            <label for='query_type' >Regarding:</label><br/>
                            <select name='query_type'>
                                <option>Support</option>
                                <option>Request A Quote</option>
                                <option>Trouble uploading a file</option>
                                <option>Other</option>
                            </select>
                            <span id='contactus_email_errorloc' class='error'></span>
                        </div>
                        <div class='container2'>
                            <label for='message' >Message:</label><br/>
                            <span id='contactus_message_errorloc' class='error'></span>
                            <textarea rows="10" cols="50" name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea>
                        </div>
                        <div class='container2'>
                            <div><img alt='Captcha image' src='show-captcha.php?rand=1' id='scaptcha_img' /></div>
                            <label for='scaptcha' >Enter the code above here:</label>
                            <input type='text2' name='scaptcha' id='scaptcha' maxlength="10" /><br/>
                            <span id='contactus_scaptcha_errorloc' class='error'></span>
                            <div class='short_explanation'>Can't read the image?
                            <a href='javascript: refresh_captcha_img();'>Click here to refresh</a>.</div>
                        </div>
                        <div class='container2'>
                            <input type='submit' name='Submit' value='Submit' />
                        </div>
                    </fieldset>
                </form>
            </article>
        </div>
    </div>
</div>

#contactus fieldset{
    padding:20px;
    border:1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px; 
    margin:0 auto;
    width:459px;
}

#contactus legend, h2{
    font-family : Arial, sans-serif;
    font-size: 1.3em;
    font-weight:bold;
    color:#333;
}

#contactus label2{
    font-family : Arial, sans-serif;
    font-size:0.8em;
    font-weight: bold;
} 

/* #contactus input[type="text2"], textarea{
    font-family : Arial, Verdana, sans-serif;
    font-size: 0.8em;
    line-height:140%;
    color : #000; 
    padding : 3px; 
    border : 1px solid #999;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

#contactus input[type="text2"]{
    height:26px;
    width:459px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#contactus #scaptcha{
    width:80px;
    height:26px;
}

#contactus input[type="submit2"]{
    width:100px;
    height:30px;
    padding-left:0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;   
}

#contactus textarea2{
    height:120px;
    width:469px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;  
}

 #contactus input[type="text2"]:focus,textarea:focus{
     color : #009;
     border : 1px solid #0E0D0D;
     background-color : #D1E7FF;
     font-weight:bold;
}

 #contactus .container2{
     margin-top:8px;
     margin-bottom: 10px;
}

#contactus .error{
    font-family: Verdana, Arial, sans-serif; 
    font-size: 0.7em;
    color: #900;
    background-color : #FF8088;
}

#contactus fieldset#antispam{
    padding:2px;
    border-top:1px solid #EEE;
    border-left:0;
    border-right:0;
    border-bottom:0;
    width:350px;
}

#contactus fieldset#antispam legend{
    font-family : Arial, sans-serif;
    font-size: 0.8em;
    font-weight:bold;
    color:#333;   
}

#contactus .short_explanation{
    font-family : Arial, sans-serif;
    font-size: 0.8em;
    color:#333;   
}

/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip{
    display:none;
    width:10px;
    height:3px;
}
#fg_crdiv{
    font-family : Arial, sans-serif;
    font-size: 0.3em;
    opacity: .2;
    -moz-opacity: .2;
    filter: alpha(opacity=20);   
}
#fg_crdiv p{
    display:none;
}

我已经尝试了一切，我无法弄清楚影响表单的原因是什么导致它在移动设备上的屏幕上运行。 Here is the link to the form.

Answer 1

在main.css中，您已经硬编码了一些宽度，例如输入字段的宽度，字段集的宽度。只需删除它们或按百分比制作它们，您的页面就会响应

Answer 2

很难从代码片段中看出，但是当下面的代码放在文档检查器中时，它似乎可以正常工作

您的硬编码宽度导致了问题，您可能还需要修改其他媒体查询和断点以使其在各种尺寸下都能正常工作

@media screen and (max-width: 736px){
    body, input, select, textarea {
        line-height: 2em;
        width: 100%;
    }
    #contactus input[type="text2"] {
        height: 26px;
        width: 100%;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
}

<link rel="stylesheet prefetch" href="https://www.munroprinting.com/assets/css/main.css">
<div class="container">
  <div id="content">
    <article>
      <!-- Form Code Start -->
      <form id="contactus" action="/upload/contactform.php" method="post" accept-charset="UTF-8">
        <fieldset>
          <legend>Contact us</legend>

          <input type="hidden" name="submitted" id="submitted" value="1">
          <input type="hidden" name="id3a31ca8adb123c3ea7b9" value="432ce4949a45b03c0299f37b81305012">
          <input type="text2" class="spmhidip" name="sp5d7f1e2089582b5699eab58b16dad351">

          <div class="short_explanation">* required fields</div>

          <div><span class="error"></span></div>
          <div class="container2">
            <label for="name">Your Full Name*: </label><br>
            <input type="text2" name="name" id="name" value="" maxlength="50" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"><br>
            <span id="contactus_name_errorloc" class="error"></span>
          </div>
          <div class="container2">
            <label for="email">Email Address*:</label><br>
            <input type="text2" name="email" id="email" value="" maxlength="50"><br>
            <span id="contactus_email_errorloc" class="error"></span>
          </div>
          <div class="container2">
            <label for="phone">Phone Number:</label><br>
            <input type="text2" name="phone" id="phone" value="" maxlength="15"><br>
            <span id="contactus_phone_errorloc" class="error"></span>
          </div>
          <div class="container2">
            <label for="query_type">Regarding:</label><br>
            <select name="query_type">
        <option>Support</option>
        <option>Request A Quote</option>
        <option>Trouble uploading a file</option>
        <option>Other</option>
    </select>
            <span id="contactus_email_errorloc" class="error"></span>
          </div>
          <div class="container2">
            <label for="message">Message:</label><br>
            <span id="contactus_message_errorloc" class="error"></span>
            <textarea rows="10" cols="50" name="message" id="message"></textarea>
          </div>
          <div class="container2">
            <div><img alt="Captcha image" src="show-captcha.php?rand=1" id="scaptcha_img"></div>
            <label for="scaptcha">Enter the code above here:</label>
            <input type="text2" name="scaptcha" id="scaptcha" maxlength="10"><br>
            <span id="contactus_scaptcha_errorloc" class="error"></span>
            <div class="short_explanation">Can't read the image?
              <a href="javascript: refresh_captcha_img();">Click here to refresh</a>.</div>
          </div>


          <div class="container2">
            <input type="submit" name="Submit" value="Submit">
          </div>

        </fieldset>
      </form>
    </article>

  </div>
</div>

css导致我的表单在移动设备上运行

2 个答案: