防止Android键盘推送布局
Pra*_*uis 6 html css android textarea twitter-bootstrap
我使用bootstrap，css和html创建了一个表单。
但是，当我单击Android手机上的文本区域时（也就是当它成为焦点时），该文本区域的下半部分会更改颜色。
我不明白为什么它会变白。顺便说一句：它可以在PC上正常工作。
我的CSS代码：
.container-fluid{
background-color: #EF4247;
border-color: #EF4247;
}
form {
height: 100%;
width: 100%;
padding: 50;
background-color: #EF4247;
border-color: #EF4247;
text-align: center;
margin: 0;
}
h1{
text-align:center;
}
textarea{ width:200px;
}
.form-horizontal .control-group {
margin-bottom: 20px;
}
我的HTML代码：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>SEND ME SOME MAIL</h1>
<form class="form-horizontal" action="mail.php" method="post" >
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email" name="subject">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Text Area</label>
<div class="controls">
<textarea id="textarea" rows="10" name="message" placeholder="Enter your message here:"></textarea>
</div>
</div>
<button type="submit" class="btn">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="fitter-happier-text.js"></script>
<script type="text/javascript"></script>
</div>
</body>
</html>
我认为这个特定示例中的根本问题是引导container-fluidCSS 样式的行为似乎与您在移动设备上期望的效果不兼容。
我对此的回答只是用一个新的块元素封装您的表单并在其上设置您的背景。然后设置min-height:100%这个新的块容器以及<html>和<body>元素。
像这样的东西：
html, body {
min-height:100%;height:100%;
}
.red-background-not-on-body-or-html {
background-color: #EF4247;
min-height:100%;
}
和这样的html：
<body>
<div class="red-background-not-on-body-or-html">
<div class="container-fluid">
<!-- FORM HERE -->
</div>
</div>
</body>
就您的示例而言，您也可以将background-color属性放在<body>或<html>标签本身上。
否则，如果您仍然要求背景尊重.container-fluidCSS 逻辑，那么您可以尝试对手持设备进行媒体查询，但可能会变得混乱。
您还可以尝试重新排序，使表单位于流体逻辑之外，然后添加min-height:100%到表单中。
| 归档时间： |
|
| 查看次数： |
7125 次 |
| 最近记录： |