在键盘出现之前
键盘显示后
我需要键盘根本不调整布局大小，只是出现在页面顶部并让用户上下滚动。这是我的代码
<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>
答案在这里
$(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();
});