Question

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

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

Answer 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();
});

软键盘重新显示移动网络的大小

1 个答案: