我的手机上显示的联系表格溢出时出现问题

问题描述：

问题的根本在于，无论何时将此表单显示在手机上，当我将文本输入到表单中时，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; 
}

你还可以提供截图吗？ –

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％的宽度。

我的手机上显示的联系表格溢出时出现问题

相关推荐