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

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

标签和图片适配

我们先来确定几个问题以及在手机端上为什么要做这样的适配

1. 对于容器标签如果超过屏幕宽度可能会出现左右滚动;

2. 虽然容器标签比较正常，但其内部标签强制设置的宽度超过屏幕宽度可能会出现左右滚动;

3. 用户直接复制内容进行编辑的不可控性也有可能出现左右滚动;

以上情况都有可能导致页面Android上渲染不正常;

(经过比较,由于Android WebView与WkWebView渲染机制不同，在同样开启屏幕属性后。iOS会自动处理标签适配而Android优先内容自适应原则，因此会出现左右滚动现象。

图片适配仍需要采用脚本强制适配处理。)

//在H5端添加以下脚本处理可解决大部分标签宽度适配

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