<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>hello world</title>
</head>
<body>
<script type="text/javascript">
var getVirtualKeyBoardHeightDiv = document.createElement("div");
getVirtualKeyBoardHeightDiv.innerHTML = '<div id="getVirtualKeyBoardHeightDiv" style="position: fixed; top:80%; bottom: 0; height: 12px; color: red;"></div>';
document.body.appendChild(getVirtualKeyBoardHeightDiv);
var getVirtualKeyBoardHeightDivOldOT = document.getElementById("getVirtualKeyBoardHeightDiv").offsetTop;
window.onresize = function() {
var getVirtualKeyBoardHeightDivOT = document.getElementById("getVirtualKeyBoardHeightDiv").offsetTop;
window.keyboardHeight = getVirtualKeyBoardHeightDivOT - getVirtualKeyBoardHeightDivOldOT;
console.log(getVirtualKeyBoardHeightDivOldOT+"-"+getVirtualKeyBoardHeightDivOT+"="+Math.abs(keyboardHeight));
}
</script>
</body>
</html>
思路:resize事件前后的置底dom元素的offsetTop的差值就是虚拟键盘的高度。