Question

请注意，这是移动网络浏览器上的HTML问题。这不是nativa应用程序或phonegap应用程序。

问题详情：

每当我触摸/点击输入文本域时，Android键盘都会切换并弄乱HTML布局。键盘切换后，HTML溢出元素和body元素将移动并缩放，输入框始终被覆盖。我已经尝试禁用所有溢出容器和高度，它工作正常。浏览器将内容向上推，输入文本字段未被键盘覆盖。在iPad Air和mini上测试，iphone4在ios 7和8.0.2上运行良好。

After toggle keyboard Before toggle keyboard

问题建立于：

设备：三星Galaxy Note 3

操作系统：Android Kitkat 4.4.2

浏览器：Google Chrome，Firefox

我的研究结论 我做过一些研究，我发现的大多数解决方案都与android manifest xml有关。它似乎是一个原生的应用程序解决方案，我不确定它是否有效以及它如何适用于网络。请指教。 example ref

目标结果：

我需要保持当前布局以使容器溢出隐藏，并且内部内容能够滚动以及每次单击输入字段时，它会阻止缩放并始终在键盘顶部而不是被覆盖（在内容和导航）。结果需要在移动Web浏览器上运行。

Code at JSBin

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div id="sticky-bar">
      <a id="toggle" href="#">MENU</a>
    </div>
    <nav id="navigation">
      <ul>
        <li><h5>SCROLL HERE</h5></li>
        <li><a href="#">nav link 1</a></li>
        <li><a href="#">nav link 2</a></li>
        <li><a href="#">nav link 3</a></li>
        <li><a href="#">nav link 4</a></li>
        <li><a href="#">nav link 5</a></li>
        <li><a href="#">nav link 6</a></li>
        <li><a href="#">nav link 7</a></li>
        <li><a href="#">nav link 8</a></li>
        <li><a href="#">nav link 9</a></li>
        <li><a href="#">nav link 10</a></li>
        <li><a href="#">nav link 11</a></li>
        <li><a href="#">nav link 12</a></li>
        <li><a href="#">nav link 13</a></li>
        <li><a href="#">nav link 14</a></li>
        <li><a href="#">nav link 15</a></li>
        <li><a href="#">nav link 16</a></li>
        <li><a href="#">nav link 17</a></li>
        <li><a href="#">nav link 18</a></li>
        <li><a href="#">nav link 19</a></li>
        <li><a href="#">nav link 20</a></li>
        <li><a href="#">nav link 21</a></li>
        <li><a href="#">nav link 22</a></li>
        <li><a href="#">nav link 23</a></li>
        <li><input type="text" placeholder="enter keywords" /></li>
      </ul>
    </nav>
    <main id="content">
      <div id="inner">
        <div class="module-1">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
        </div>
        <div class="module-2">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
        </div>
        <div class="module-1">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
        </div>
        <div class="module-2">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
        </div>
        <div class="module-1">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
        </div>
        <div class="module-2">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
        </div>
        <div class="module-3">
          <h3>Enter the form</h3>
          <form>
            <label>
              <input type="text" placeholder="Enter a value" />
            </label>
            <input type="submit" value="SUBMIT" />
          </form>
        </div>
        <div class="module-1">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
        </div>
        <div class="module-2">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, consectetur culpa excepturi adipisci itaque ut, laudantium obcaecati dolorem voluptatibus optio provident quos vel eligendi. Ut eaque inventore nesciunt alias ullam!</p>
        </div>
        <div class="module-3">
          <h3>Enter the form</h3>
          <form>
            <label>
              <input type="text" placeholder="Enter a value" />
            </label>
            <input type="submit" value="SUBMIT" />
          </form>
        </div>
      </div>
    </main>
  </div>
</body>
</html>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f3f3f3;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

#container,
#content,
#inner {
  height: 100%;
}

#container {
  overflow: hidden;
  position: relative;
}

#content {
  display: block;
  padding-top: 30px;
  position: relative;
  left: 0;
  transform: translate3d(0px, 0, 0);
  transition: transform 1s;
  z-index: 8;
}
.menu-open #content {
  transform: translate3d(150px, 0, 0);
}

#inner {
  overflow: auto;
}

#sticky-bar {
  position: absolute;
  height: 30px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 19;
  background: orange;
  text-align: right;
}
#sticky-bar a {
  display: inline-block;
  padding: 8px;
  font: bold 12px arial;
  text-decoration: none;
  color: #fff;
  background: teal;
}

h5 {
  color: orange;
  font-size: 15px san-serif;
  margin: 0;
}

#navigation {
  position: absolute;
  top: 0;
  padding-top: 30px;
  left: 0;
  height: 100%;
  width: 150px;
  background: black;
  transition: transform 1s;
  transform: translate3d(-100%, 0, 0);
  z-index: 9;
}
.menu-open #navigation {
  transform: translate3d(0%, 0, 0);
}
#navigation ul {
  width: 100%;
  height: 100%;
  overflow: auto;
  list-style: none;
  padding: 0;
  position: relative;
  margin: 0;
}
#navigation ul:before, #navigation ul:after {
  display: table;
  content: '';
}
#navigation ul:after {
  clear: both;
}
#navigation li {
  display: block;
  padding: 10px 14px;
}
#navigation li:nth-child(even) {
  background: yellow;
}
#navigation li:nth-child(even) a {
  color: black;
}
#navigation input[type='text'] {
  display: inline-block;
  width: 100%;
  padding: 5px;
  border: 0;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
}
#navigation a {
  color: #fff;
  font: 14px arial;
  text-transform: capitalize;
  text-decoration: none;
}

.module-1, .module-2, .module-3 {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 10px;
  background: #666;
  color: #fff;
}

.module-2 {
  background: #fff;
  color: #666;
}

.module-3 {
  background: green;
  color: #fff;
}
.module-3 input[type='text'] {
  font-size: 15px;
}
.module-3 input[type='text']:focus {
  font-size: 16px;
}

JS（jQuery）

$(function() {
  $('#toggle').on('click', function(e){
    e.preventDefault(); 
    $('#container').toggleClass('menu-open');
  });
});

当切换时，由Android键盘搞乱的HTML溢出滚动内容

问题详情：

问题建立于：

目标结果：

HTML

CSS

JS（jQuery）

0 个答案: