防止Android键盘推送布局答案

【问题标题】：Preventing Android Keyboard from pushing layout防止Android键盘推送布局
【发布时间】：2014-11-03 06:00:02
【问题描述】：

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

但是，当我点击安卓手机上的文本区域时（即当它进入焦点时），文本区域的下半部分会改变颜色。

我不明白为什么它会变白。顺便说一句：它在 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>

【问题讨论】：

可以把背景色放在body而不是form上吗？如果是这样，那么它可能是一种解决方法。

标签： android html css twitter-bootstrap textarea

【解决方案1】：

我认为这个特定示例中的根本问题是引导程序 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

【讨论】：

这样做会使网页在 PC 上看起来很有趣。 prasanthlouis.com/index1.html 不过使用安卓手机时问题已解决。
通过添加宽度/高度属性编辑了我的答案。我认为这在移动设备上仍然可以；但还没有测试过。

【解决方案2】：

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

body {
  position: absolute;
}

【讨论】：

【解决方案3】：

我延迟焦点：

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

【讨论】：