最近在开发Android项目的时候,使用ScrollView嵌套WebView在小米手机上出现了页面显示不全,文字错乱,背景成黑色的问题,抓耳挠腮找了半天,布局改了又改,直到将WebView的高度由wrap_content改成match_parent,页面才正常显示,但与此同时又出现了新的问题,页面底部留了大片空白,实在是不美观,经过一番寻找,终于给找到一个合适的方法,在此记录一下。
步骤很简单,只需要三步:
- 1 将webview的布局高度设为wrap_content
- 2 在webview所在的Activity/Fragment中创建一个类,并添加Javascript方法
public class MyJavaScript {
@JavascriptInterface
public void resize(float height) {
Log.e("TAG", "resize: " + height);
runOnUiThread(() -> {
MyScrollView.LayoutParams layoutParams = new MyScrollView.LayoutParams(getResources().getDisplayMetrics().widthPixels, (int) (height * getResources().getDisplayMetrics().density));
layoutParams.leftMargin = SizeUtils.dp2px(LoveAudioDetailActivity.this, 8f);
layoutParams.rightMargin = SizeUtils.dp2px(LoveAudioDetailActivity.this, 12f);
layoutParams.topMargin = SizeUtils.dp2px(LoveAudioDetailActivity.this, 5f);
mWebView.setLayoutParams(layoutParams);
});
}
}
- 3 在webview所在的Activity/Fragment中添加js支持,并在webview页面加载完成时调用js方法
settings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new MyJavaScript(), "APP");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
mWebView.loadUrl("javascript:window.APP.resize(document.body.getBoundingClientRect().height)");
}
});
经过以上几步,webview就能正常的显示了。