我的手機上顯示的聯繫表格溢出時出現問題

問題的根本在於，無論何時將此表單顯示在手機上，當我將文本輸入到表單中時，textarea都會展開太多並瀏覽提交按鈕和頁腳。當我點擊textarea外部時，它保持展開狀態，但提交按鈕和頁腳返回到它們在textarea下的位置。我究竟做錯了什麼？我在這裏提供了html和css。它是什麼可能導致類似的事情發生，我該如何解決？我的手機上顯示的聯繫表格溢出時出現問題

我希望它做的是保持合理的大小。在桌面上加載時似乎沒有任何問題。它似乎只發生在手機上。

這是HTML

<!DOCTYPE html> 

<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> 

<body> 
    <form action="success.php" method="POST" onSubmit="return  validateTextbox();" enctype="multipart/form-data"> 
    <input type="hidden" name="action" value="submit"> Full Name: 
    <input id="fullname" name="name" type="text" value="" size="40" placeholder="First and Last Name" /> 
    <br> 
    <br> Your Email: 
    <input id="youremail" name="email" type="email" value="" size="40" placeholder="Enter your Email" /> 
    <br> 
    <br> 
    <!--How do you want your transcript?<br><br> 
<input type="radio" name="transcript_type" value="verbatim"/>Verbatim 
<input type="radio" name="transcript_type" value="non_verbatim"/>Non- Verbatim 
<input type="radio" name="transcript_type" value="unknown"/>Don't Know Yet<br><br>-->Your Message: 
    <br> 
    <br> 
    <textarea id="messageArea" name="message" rows="40" cols="80" placeholder="Enter your message here (10 character minimum.)"></textarea> 
    <br> 
    <input type="submit" value="Submit" onclick="return val();" /> </form> 
</body> 

</html>

這是CSS

body { 
    background-color: black; 
} 
form { 
    /*border-style: solid; 
border-right-style: none; 
border-left-style: none;*/ 

    padding-top: 100px; 
    text-align: center; 
    width: 100%; 
    background-size: cover; 
    background-image: url(images/starbright_avw.png); 
    margin-top: 20px; 
    color: white; 
} 
label { 
    font-family: impact; 
} 
/* 
text-align: center; 
    margin-top: 40px;*/ 

input[type="submit"] { 
    height: 50px; 
    border-radius: 5px; 
    border-style: solid; 
    border-color: black; 
    color: black; 
    margin-bottom: 50px; 
    margin-top: 10px; 
} 
.row { 
    margin-top: 20px; 
} 
p.message {} p.yourMessage { 
    font-family: impact; 
    color: blue; 
}

來源

2016-10-27 Shutter

你還可以提供截圖嗎？ –

http://i63.tinypic.com/w7yhio.png和http://i66.tinypic.com/2n7jtpy.png這些是我開始向他們輸入文字後，手機上的表格。 – Shutter

看來，如果你給它一個像'height：686px'這樣的固定高度，它就不會被消耗。我仍在研究它。 –

我想這可能是由移動網站視變焦引起的。一旦在textarea中輸入任何字符，移動視口縮放將使行高增加10px，這將增加文本區域的高度（cols * 10px）。在你的代碼中，它增長了400px。我有兩個解決方案。

設置textarea的固定高度。至於你的情況，你可以設置textarea的高度爲cols * line-height。假設你的文字行高爲18px和cols="40"，你可以設置height:18*40=720px;。
您可以添加：

<head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></head>

，並設置文本區域爲100％的寬度。

來源

2016-10-27 03:46:46

我的手機上顯示的聯繫表格溢出時出現問題

回答

相關問題