关于WebView因图片太大导致出现横向滚动条问题

最新推荐文章于 2022-10-21 11:58:59 发布

志哥的博客

最新推荐文章于 2022-10-21 11:58:59 发布

阅读量2.5k

点赞数

分类专栏： Android 文章标签： webview 图片太大出现横向滚动条

本文链接：https://blog.csdn.net/jyz_2015/article/details/51543533

版权

Android 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

有时候用webView 后台返回的图片太大了导致出现了横向滚动条影响美观找了很久找到了一个方法给图片设置样式

<style>img{max-width:360px !important;}</style>

这样就可以让图片不会太大了


下面给个全部的代码

public static void setUpWebView(WebView wv_detail, String content) throws UnsupportedEncodingException {
    String text = URLDecoder.decode(content,"UTF-8");
    //**************处理web页面**********************
    String str1 = "<!DOCTYPE html>\n" +
            "<html>\n" +
            "\t<head>\n" +
            "\t\t<meta charset=\"utf-8\">\n" + "<style>img{max-width:360px !important;}</style>" +
            "\t\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, user-scalable=no\"></head><body>\n";
    String str2 = "</body><html>";
    wv_detail.getSettings().setDefaultTextEncodingName("UTF -8");
    WebSettings settings = wv_detail.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    //控制webView不要出现横向滚动条
    settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
    wv_detail.setVerticalScrollBarEnabled(false);
    wv_detail.setVerticalScrollbarOverlay(false);
    wv_detail.setHorizontalScrollBarEnabled(false);
    wv_detail.setHorizontalScrollbarOverlay(false);
    if (!TextUtils.isEmpty(text)){
        wv_detail.loadDataWithBaseURL("A", str1 + text + str2, "text/html",
                "UTF-8", null);
        wv_detail.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
    }
    wv_detail.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return true;
        }
    });
}

这样再把你的内容放进去就可以让图片不会超出屏幕宽度了

另外  因为项目中的详情还有其他的内容 所以自己自定义了个webView 一起贴上

public class TouchWebView extends WebView {
    public TouchWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public TouchWebView(Context context) {
        super(context);
    }
    /*@Override
    public boolean onTouchEvent(MotionEvent event){
        requestDisallowInterceptTouchEvent(true);
        return super.onTouchEvent(event);
    }*/

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
//        WindowManager wm = (WindowManager) getContext()
//
//                .getSystemService(Context.WINDOW_SERVICE);
//        int width = wm.getDefaultDisplay().getWidth();
//        super.onMeasure(width, expandSpec);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}