Android使用WebView缩放页面遇到的问题

原生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;
    }

你可能感兴趣的:(android)