原生WebView是系统自带的,功能略微寒碜了点,但有些时候又不得不用。
原生WebView如何进行页面缩放呢?
webSettings = webView.getSettings();
webSettings.setSupportZoom(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(false);
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
这就完了,但是只有允许使用缩放的页面才有用。
但是,大部分页面都是不允许缩放的,viewport的属性设置了user-scalable=no
想要允许缩放,就需要修改viewport属性。
尝试过在原生WebView修改页面viewport,但是无效,明显不支持。使用X5内核的webview是可以生效的,ios的原生webview也支持修改,想不明白为啥Android不支持。
下面是对尝试的一些记录:
尝试1,加载完页面后使用js修改viewport属性。结果无效!
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Log.i("jerald","onPageFinished : "+(System.currentTimeMillis() - time));
runOnUiThread(new Runnable() {
@Override
public void run() {
removeViewPort();
autoBreak();
}
});
}
@Nullable
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
return super.shouldInterceptRequest(view, request);
}
});
private void removeViewPort(){
String name = "viewport";
String content = "width=device-width";
// String content = "width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no";
String ss = "var metaNodes=document.getElementsByTagName(\'meta\');var metaNode;for(var i=0;i() {
@Override
public void onReceiveValue(String value) {
Log.i("jerald","onReceiveValue :"+value);
}
});
}
private void autoBreak(){
String ss = "var bodys = document.getElementsByTagName(\'body\');var body;if(bodys.length > 0 ){bodys[0].style.word-break=\'break-all\'};";
Log.i("jerald",ss);
webView.evaluateJavascript(ss, new ValueCallback() {
@Override
public void onReceiveValue(String value) {
Log.i("jerald","autoBreak onReceiveValue :"+value);
}
});
}
尝试2,缓存页面的代码修改viewport后再使用webview的loadData方法进行加载。有效但是页面显示异常,加载不完全!
new Thread(new Runnable() {
@Override
public void run() {
try {
final String body = getHtmlString("https://cloud.tencent.com/developer/ask/51345");
runOnUiThread(new Runnable() {
@Override
public void run() {
// webView.loadDataWithBaseURL(null, body, "text/html", "utf-8", null);
webView.loadData(body,"text/html", "utf-8");
}
});
}catch (Exception e){
Log.e("jerald",e.toString());
}
}
}).start();
public static String getHtmlString(String url) {
Document doc = null;
try {
doc = Jsoup.connect(url).get();
Log.i("jerald","get over : "+(System.currentTimeMillis() - time));
Elements elements = doc.getElementsByTag("meta");
for (Element element: elements) {
String tagName = element.tagName();
if (!TextUtils.isEmpty(tagName) && tagName.equals("viewport")){
element.remove();
break;
}
}
Element element = doc.createElement("meta");
String content = "width=device-width";
// String content = "width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no";
element.attr("content",content);
element.attr("name","viewport");
// Log.i("jerald",""+element.toString());
doc.select("head").first().appendChild(element);
// Log.i("jerald",""+doc.select("head").first().toString());
}catch (Exception e){}
if (doc != null){
return doc.toString();
}
return null;
}