H5页面在原生WebView中渲染适配问题(一)

html在WebView中存在各种适配情况：比如标签宽度、图片大小、字体大小等。本节我们就先讲讲由这些尺寸导致的适配；对于SDK版本兼容适配、安全性适配以及结合路由与前端交互适配，在后续的文章中会发出;

标签和图片适配

我们先来确定几个问题以及在手机端上为什么要做这样的适配
1. 对于容器标签如果超过屏幕宽度可能会出现左右滚动;
2. 虽然容器标签比较正常，但其内部标签强制设置的宽度超过屏幕宽度可能会出现左右滚动;
3. 用户直接复制内容进行编辑的不可控性也有可能出现左右滚动;

---

以上情况都有可能导致页面Android上渲染不正常;
(经过比较,由于Android WebView与WkWebView渲染机制不同，在同样开启屏幕属性后。iOS会自动处理标签适配而Android优先内容自适应原则，因此会出现左右滚动现象。
图片适配仍需要采用脚本强制适配处理。)

//在H5端添加以下脚本处理可解决大部分标签宽度适配
<script type="text/javascript">
window.onload = function() {
	$_init_element_max_size();
};
$_init_element_max_size();

function $_init_element_max_size() {
	//取客户端最大宽度
	var maxwidth = document.body.clientWidth;
	//需要处理元素集
	var elements = ['body', 'section', 'img', 'p', 'table', 'div'];
	//此元素下偏移量减10
	var offsets = ['section'];
	for(var i in elements) {
		if(!elements[i] || elements[i] == 'undefined') {
			continue;
		}
		var elementList = document.getElementsByTagName(elements[i]);
		for(var e in elementList) {
			if(!elementList[e].style || elementList[e].style == 'undefined') {
				continue;
			}
			if(offsets.indexOf(elements[i]) >= 0) {
				elementList[e].style.maxWidth = (maxwidth - 10) + "px";
			} else {
				elementList[e].style.maxWidth = maxwidth + "px";
			}
		}
	}
}
</script>

Native 字体适配

1.通过屏幕密度调整分辨率

WebSettings settings = mWebView.getSettings();
int screenDensity = getResources().getDisplayMetrics().densityDpi;
WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM;
switch (screenDensity) {
    case DisplayMetrics.DENSITY_LOW:
        zoomDensity = WebSettings.ZoomDensity.CLOSE;
        break;
    case DisplayMetrics.DENSITY_MEDIUM:
        zoomDensity = WebSettings.ZoomDensity.MEDIUM;
        break;
    case DisplayMetrics.DENSITY_HIGH:
        zoomDensity = WebSettings.ZoomDensity.FAR;
        break;
}
settings.setDefaultZoom(zoomDensity);

2.设置自适应属性

settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);