Question

我使用bootstrap，css和html创建了一个表单。

然而，当我点击Android手机上的文本区域时（即，当它进入焦点时），textarea的下半部分会改变颜色。

我不明白为什么它会变白。顺便说一句：它在PC上工作正常。

Normal Bottom half is white

我的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>

Answer 1

我认为这个特定示例中的基本问题是bootstrap container-fluid CSS样式的行为似乎与您在移动设备上的预期效果不兼容。

我对此的回答只是用新的块元素封装你的表单并设置你的背景。然后在这个新的块容器以及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-fluid CSS逻辑，那么你可以尝试用手持设备进行媒体查询，但它可能会变得混乱。

您也可以尝试重新排序，以便表单不在流畅的逻辑中，然后将min-height:100%添加到表单中。

JSBin to illustrate

Answer 2

我知道这是很老的帖子，但是无论如何，您可以做什么。

body {
  position: absolute;
}

Answer 3

我延迟了焦点：

// If the form has the focus the keyboard moves the layout
setTimeout(() => this.focus(0), 1000);

阻止Android键盘推送布局

3 个答案: