本文详细探讨了HTML5中如何获取屏幕、顶部状态栏、软键盘及Webview的高度。通过Native.js和HTML5Plus API，可以获取到设备的物理分辨率和逻辑分辨率，并在Android和iOS上区分处理。在Android上，输入法高度可通过屏幕高度减去状态栏和Webview高度计算得出。同时，文章提到了HTML中的document.body.clientHeight和document.body.scrollHeight的区别，并介绍了如何监控软键盘的弹出与消失。
如果没有手动调整过webview的高度的话，默认情况下，屏幕的高度=顶部状态栏的高度+webview的高度。
如果软键盘打开，则屏幕的高度=顶部状态栏的高度+webview的高度+软键盘的高度。
HTML5 规范目前没有提供状态栏高度和软键盘高度的直接的查询方法，不过有了Native.js，我们还是能查询到所有这些高度的数值。
背景知识介绍：
手机屏幕有真实的物理分辨率，比如小米note的高度是1920px。
但在网页里，一个10px的字体，并不会小的看不清，因为webview提供了逻辑分辨率的概念。
如果不在meta里设置，默认下小米note的放大系数scale是3，就是会放大3倍显示。
也就是对于HTML而言，小米note的高度是1920/3=640px。
如果网页是全屏的，没有顶部状态栏，那么一个640px高的div将撑满屏幕高度。
获取屏幕、顶部状态栏和软键盘的高度
1. 屏幕的高度
获取屏幕的高度很简单，HTML自带了screen.height，直接就可以得到屏幕的整体高度，单位是px，物理分辨率值(不是HTML的逻辑分辨率)。
HTML5Plus里提供了plus.screen.resolutionHeight方法，也是屏幕高度，但这个值是逻辑分辨率的高度。参考[http://html5plus.org/doc/zh_cn/device.html#plus.screen](http://html5plus.org/doc/zh_cn/device.html#plus.screen)
screen.height =
最低0.47元/天 解锁文章
3857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
