软键盘在显示时调整移动网络大小答案

【问题标题】：Soft keyboard resize mobile web on show up软键盘在显示时调整移动网络大小
【发布时间】：2019-03-19 01:34:50
【问题描述】：

我需要键盘根本不调整布局大小，只是出现在页面顶部并让用户上下滚动。这是我的代码

<html>
<header>
<title>Test Page</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;padding:0;}
</style>
</header>
<body>
<div style='float:left;width:100%;height:20%;background:red;'></div>
<div style='float:left;width:100%;height:60%;background:pink;'></div>
<div style='float:left;width:100%;height:20%;background:tan;'><input type='text' style='float:left;height:30%;width:50%;'></div>
</body>
</html>

【问题讨论】：

标签： jquery css layout android-softkeyboard

【解决方案1】：

这里有答案

$(document).ready(function () {
  'use strict';

  var orientationChange = function () {
    var $element = $('html');
    $element.css('height', '100vh'); // Change this to your own original vh value.
    $element.css('height', $element.height() + 'px');
  };

  var s = screen;
  var o = s.orientation || s.msOrientation || s.mozOrientation;
  o.addEventListener('change', function () {
    setTimeout(function () {
      orientationChange();
    }, 250);
  }, false);
  orientationChange();
});

【讨论】：