android 图文音频视频新闻稿件样式设定

使用webview显示新闻图文，音频视频，稿件。

1 ，先展示css和js配置文件

webview的css配置文件

@font-face {
    font-family: Impact;
     src: url(file:///android_asset/font/FZYANS_JW.ttf);
}
*{
   margin: 0, 8px, 8px, 0;
   padding: 0;
}
body{
   color: #353535;
   font-size: 16px;
    line-height: 26px;
   text-align: justify;
   font-family: Impact;
   overflow: hidden;
}
img,video,iframe{
   display: block;
    width: 100%;
   max-width: 100%;
   margin: 10px auto;
   height: auto;
}
img{
   height: auto!important;
}
video{
   height: 220px;
   background: #000000;
   object-fit:cover;
}
p {
    margin-bottom: 15px;
    /*允许长单词换行到下一行*/
    word-wrap: break-word;
/*    word-break:break-all;*/
}

p:after{
    content: '';
    display: block;
    clear: both;
}

/*隐藏视频底部控制栏*/
/*video::-webkit-media-controls-enclosure{
     display:none !important;
 }
 

JS配置文件

var screenInit = {
   setDefaultFontSize: function() {
        if(!document.querySelector('html').style.fontSize) {
            document.querySelector('html').style.fontSize = window.innerWidth / 750 * 100 + 'px';
        }
//        alert(document.querySelector('html').style.fontSize);
   }
};

function getMainHeight() {
    var main = document.getElementById("main");
    return main.offsetHeight; //高度
}

/*页面加载完毕后执行*/
window.onload = function() {

    screenInit.setDefaultFontSize();

    if (window.AndroidNative.resize) {
        window.AndroidNative.resize(getMainHeight())
//        alert("内容高度====" + getMainHeight());
    }
}

 

最重要的适配文件展示后，就是关于，webview的set属性设置，这里建议采用原生webview，腾讯x5的webview视频展示窗口调整较麻烦

  WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setUseWideViewPort(true);
        settings.setUserAgentString(settings.getUserAgentString() + " XinHuaNet/" + BuildConfig.VERSION_NAME);
        settings.setLoadWithOverviewMode(true); // webview加载的页面的模式
        settings.setDisplayZoomControls(false);// 隐藏webview缩放按钮
        settings.setSupportZoom(false);
        settings.setBuiltInZoomControls(true);
        mWebView.setClickable(true);
        settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); // 设置缓存
        settings.setDomStorageEnabled(true);// 设置适应Html5 //重点是这个设置

//        settings.setBlockNetworkImage(true); // 先阻塞加载图片
//        mWebView.addJavascriptInterface(this, "MyApp");

        mWebView.addJavascriptInterface(this, "AndroidNative");

        mWebView.setVerticalScrollBarEnabled(false);
        mWebView.setVerticalScrollbarOverlay(false);
        mWebView.setHorizontalScrollBarEnabled(false);
        mWebView.setHorizontalScrollbarOverlay(false);
        // 自适应屏幕
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        settings.setPluginState(WebSettings.PluginState.ON);
//
//        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);


        mWebView.setWebViewClient(new WebViewClient() {

            @Override
            public WebResourceResponse shouldInterceptRequest(WebView webView, String s) {
                LogUtils.i(TAG, "shouldInterceptRequest");
                return super.shouldInterceptRequest(webView, s);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView webView, String url) {
                LogUtils.i(TAG, "shouldOverrideUrlLoading");
                // 拦截详情Url
                if (!TextUtils.isEmpty(url) && (url.contains("http://") || url.contains("https://"))) {
                    Bundle bundle = new Bundle();
                    bundle.putString(Constants.KEY_URL, url);
                    bundle.putString(Constants.KEY_TITLE, "");
                    readyGo(NewsDetailWebShowActivity.class, bundle);
                    return true;
                }
                return false;
            }

            @Override
            public void onPageStarted(WebView webView, String url, Bitmap bitmap) {
                super.onPageStarted(webView, url, bitmap);
                showLoading();
            }

            @Override
            public void onPageFinished(WebView webView, String url) {
                super.onPageFinished(webView, url);
                dismissLoading();
                mLayoutNull.setVisibility(View.GONE);
                //判断webview是否加载了图片资源
//                if (!settings.getLoadsImagesAutomatically()) {
//                    //设置webView加载图片资源
//                    settings.setLoadsImagesAutomatically(true);
//                }
//                settings.setBlockNetworkImage(false);
                showCommentList();
                if (getIntent().getBooleanExtra("jumpToComment", false)) {
                    showCommentDialog();
                }
                adHelper.renderAds(mVideoListBean);
                mWebView.loadUrl("javascript:AndroidNative.resize(getMainHeight())");
            }


        });

最后是稿件的展示调用

// 注入本地css样式
String linkCss = "<link rel=\"stylesheet\" href=\"file:///android_asset/css/style.css\" type=\"text/css\">";
String webTitle = "<title>" + video.getTitle() + "</title>";
String replaceContent = "<div>" + video.getContent() + "</div>";

String body = "<html><head>" + linkCss + webTitle + "<meta name=\"viewport\"content=\"width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no\">\n" +
        "<script src=\"file:///android_asset/js/screeninit.js\"></script>" + "</head><body><div id=\"main\" class=\"main-text\">" + replaceContent
        + "<br/><p/></div></body></html>";
mWebView.loadDataWithBaseURL(linkCss, body, "text/html", "utf-8", null);