本文主要包含webview设置高度,webview高度,webview适应屏幕,webview自适应屏幕,webview屏幕适配等相关知识,教程希望在学习及工作中可以帮助到您
");
</div>
如果没有手动调整过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方法,也是屏幕高度,但这个值是逻辑分辨率的高度。
screen.height = plus.screen.resolutionHeight*plus.screen.scale
2. 获取webview高度
虽然webview的getStyle可以得到webview的高度,但开发者如果不手动设置的话,默认值是100%,这个值对本文探讨的问题没有意义。我们需要px的物理高度。
在Android里通过如下js代码可以得到webview的高度:plus.android.invoke(plus.android.currentWebview(),"getHeight")
这是一段Native.js代码,由于Android的webview原生对象就有getHeight()方法,所以就可以直接这样调用。
当然webview原生对象还有很多方法属性都可以调,具体参阅[Native.js入门](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/88)
</div>
图1(此图中,物理分辨率是蓝色字体,逻辑分辨率是黑色字体)
对于iOS,就没必要使用Native.js这么复杂的技术了,iOS的屏幕高度是固定的几个,直接判断屏幕高度和设备型号就可以了。
3. 获取状态栏高度