前言

急性子可以直接滚动到最后,有最终的代码参考

由于业务需要,需要在TV上面显示很多统计的数据.
由于web端之前就做好了,为了简单快速的实现功能,计划使用webView直接加载

实施

我们先在TV上安装了第三方游览器,打开后查看web端的适配情况.
验证没问题后,计划实施. 打包一个APK.启动后直接加载webView.

核心webView代码如下:


private void initData() {
        WebSettings settings = webView.getSettings();
        //编码格式
        settings.setDefaultTextEncodingName("utf-8");
        //将图片调整到适合webView的大小
        settings.setUseWideViewPort(true);
        //是否显示缩放工具
        settings.setBuiltInZoomControls(true);
        //是否支持缩放
        settings.setSupportZoom(true);
        settings.setLoadWithOverviewMode(true);
        //是否支持自动加载图片
        settings.setLoadsImagesAutomatically(true);
        //设置可以访问文件
        settings.setAllowFileAccess(true);
        //支持JS
        settings.setJavaScriptEnabled(true);
        settings.setDomStorageEnabled(true);
        // 不使用缓存
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        //根据cache-control决定是否从网络上取数据
//        settings.setCacheMode(WebSettings.LOAD_DEFAULT);
        // 重新布局,自适应
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

        webView.setWebViewClient(new WebOnclick());
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);

            }
        });

        webView.loadUrl(URL);

    }


/**
     * webView内事件的处理
     */
    private class WebOnclick extends WebViewClient {

        /**
         * 这个事件就是开始载入页面调用的
         */
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }


        /**
         * 在点击请求的是链接是才会调用
         * 打开网页时不调用系统浏览器， 而是在本WebView中显示
         */
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            WebView.HitTestResult hit = view.getHitTestResult();

            int hitType = hit.getType();

            if (hitType == WebView.HitTestResult.SRC_ANCHOR_TYPE) {//点击超链接
                //访问链接
                view.loadUrl(url);
                return true;//返回true浏览器不再执行默认的操作
            } else if (hitType == 0) {//重定向时hitType为0
                return false;//不捕获302重定向
            } else {
                return false;
            }
        }


        /**
         * 在页面加载结束时调用
         */
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            
        }
    }

这个是webView很简单也很通用的设置,主要是配置和在当前webView中进行调整

结果

原本以为就这样应该很简单,分分钟秒杀,结果是显示的效果不尽人意分辨率对不上

解决思路

从效果上看,很明显是分辨率的问题.而且在第三方的游览器上面显示是正常的.webView也是占满屏幕的,所以应该是webView显示html的时候分辨率错误.

解决过程

一开始以为是图片的问题.


//将图片调整到适合webView的大小
 settings.setUseWideViewPort(true);
//改为
 settings.setUseWideViewPort(false);

效果依旧

然后中间修改了


settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
//改为
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
//加入了
//设置支持插件
settings.setPluginState(WebSettings.PluginState.ON);
//启用硬件加速
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

依旧不行…然后在google过程中偶然看到一片文章.说可以声明webView的分辨率.

最后加入

webView.setInitialScale(100);
//同时
//将图片调整到适合webView的大小
settings.setUseWideViewPort(false);

这样才解决了问题.而且在网页未加载完成之前就显示出来会白屏一段时间,也做了延迟显示和增加动画

最后没问题的配置代码如下


 private void initData() {
        WebSettings settings = webView.getSettings();
        //编码格式
        settings.setDefaultTextEncodingName("utf-8");
        //将图片调整到适合webView的大小
        settings.setUseWideViewPort(false);
        //是否显示缩放工具
        settings.setBuiltInZoomControls(true);
        //是否支持缩放
        settings.setSupportZoom(true);
        settings.setLoadWithOverviewMode(true);
        //是否支持自动加载图片
        settings.setLoadsImagesAutomatically(true);
        //设置可以访问文件
        settings.setAllowFileAccess(true);
        //支持JS
        settings.setJavaScriptEnabled(true);
        settings.setDomStorageEnabled(true);
        // 不使用缓存
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        //根据cache-control决定是否从网络上取数据
//        settings.setCacheMode(WebSettings.LOAD_DEFAULT);
        // 重新布局,自适应
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        //设置支持插件
        settings.setPluginState(WebSettings.PluginState.ON);
        settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

        webView.setWebViewClient(new WebOnclick());
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);

            }
        });
        webView.setInitialScale(100);
        //启用硬件加速
        webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
        webView.loadUrl(URL);
        //渐变动画,让view出现不会很突兀
        mAnimation = new AlphaAnimation(0, 1);
        mAnimation.setDuration(1000);
    }


 /**
     * webView内事件的处理
     */
    private class WebOnclick extends WebViewClient {

        /**
         * 这个事件就是开始载入页面调用的
         */
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        /**
         * 在点击请求的是链接是才会调用
         * 打开网页时不调用系统浏览器， 而是在本WebView中显示
         */
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            WebView.HitTestResult hit = view.getHitTestResult();

            int hitType = hit.getType();

            if (hitType == WebView.HitTestResult.SRC_ANCHOR_TYPE) {//点击超链接
                //访问链接
                view.loadUrl(url);
                return true;//返回true浏览器不再执行默认的操作
            } else if (hitType == 0) {//重定向时hitType为0
                return false;//不捕获302重定向
            } else {
                return false;
            }
        }


        /**
         * 在页面加载结束时调用
         */
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            //延迟1秒让webView显示,可以避免内容还在渲染的情况
            mHandler.sendEmptyMessageDelayed(1,1000);
        }
    }

目录CONTENT

TV上面使用webView显示异常的问题

前言

实施

结果

解决思路

解决过程

最后没问题的配置代码如下

评论区