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

原创 2016年05月31日 10:10:41
有时候用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);
    }
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

如何做到背景铺满屏幕,且不会出现横向滚动条

这两天做Web页面有一个需求:是不管背景图片宽高,需要铺满整个屏幕宽度,且不论屏幕大小始终不能出现横向滚动条。 少废话,上代码先。 html结构关键代码: ...
  • bboyjoe
  • bboyjoe
  • 2016年05月13日 11:28
  • 2047

使用ul li 实现图片的左右滚动

最近项目中使用到了一个效果,即图片的左右滚动效果。 以前也写过,但是没有整理,这次顺手整理一下吧。 实现的思路很简单。 图片列表使用li 实现,在ul  的最外层包裹上div ,将这个div的o...
  • lxl631
  • lxl631
  • 2015年02月02日 19:45
  • 4657

min-width 图片太大撑破div 如何去掉滚动条

如果不处理照片方法适应DIV有限宽度,那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。 ...
  • u010289909
  • u010289909
  • 2014年10月22日 16:46
  • 1319

关于宽度100% 出现横向滚动条的问题 以及注意您的显示器...

今天在做题的时候遇到这样一道题: 看一下感觉不难,然后就撸起来了。大体采用绝对定位,ie的盒模型(比标准盒模型好酸多了),感觉应该没啥问题的,走你-> 主体代码是这样的: *{ ...
  • MrZZhou
  • MrZZhou
  • 2017年03月25日 12:06
  • 1457

解决页面滚动条出现和消失的过程页面会横向移动的问题

平时我们看一些网页刚开始加载的时候没有多少内容,页面也没有出现纵向滚动条,当我们点击加载更多,页面内容高度超过一屏于是出现滚动条,这个时候,页面会向左横向移动一段距离,正好是滚动条的宽度,这是因为滚动...
  • zifeiyu130
  • zifeiyu130
  • 2018年01月10日 18:55
  • 41

购物网站带横向滚动条的图片展示代码

  • 2017年09月24日 19:55
  • 252KB
  • 下载

UIWebView加载本地html控制横向滚动条消失,并且显示html中的本地图片

手头ios项目需要一些关于我们和简介的简单页面 考虑到样式的灵活性和多变行,我决定使用支持js和Css的UIWebView加载html来完成。 遇到的问题: 1.乱码问题。 2.样式混乱,横向...
  • wangyang2698341
  • wangyang2698341
  • 2013年03月21日 16:42
  • 3234

安卓多线程编程系列2:异步任务的使用之使用异步任务带有进度的横向滚动条下载网络图片

异步任务是多线程编程中经常使用的一种方式,这里我们介绍一下使用异步任务带有进度的下载网络图片的使用方法。 整体思路:在xml文件中放置一个Button控件和一个ImageView控件,定义一个继承A...
  • luoshiwutai
  • luoshiwutai
  • 2016年03月04日 15:18
  • 318

关于Extjs gridpanel设置autoHeight:true时,横向滚动条的问题 .

使用gridpanel时我们有时需要给设置autoHeight:true,但这时如果表格的宽度大于它的容器的宽度,多余的内容就会被隐藏而不会出现横向的滚动条,费了老大劲儿才找到了解决办法,方法就是给g...
  • oh_Mourinho
  • oh_Mourinho
  • 2012年11月21日 09:05
  • 3014

使用框架framset在IE6出现横向滚动条的解决方法

 彻底解决框架framset在IE6出现横向滚动条的烦恼,这阵子给客户做一个案例的时候,利用主框架不刷新的特点,实现音乐不间断的播放,调用的主页面是1006px在1024*768的分辨率本应该是全屏显...
  • lifuxiangcaohui
  • lifuxiangcaohui
  • 2011年04月01日 09:25
  • 1992
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于WebView因图片太大导致出现横向滚动条问题
举报原因:
原因补充:

(最多只允许输入30个字)