android的WebView加载html内容图片超出屏幕范围

本文介绍了三种让图片自适应屏幕宽度的方法:一是使用CSS样式控制图片宽度;二是借助JavaScript动态调整图片尺寸;三是通过WebView设置实现图片自适应。

1.使用css处理


img{
    width: 84vw;//占宽度的84%
}


2.在图片内容后面条件Js

另外一种让图片不超出屏幕范围的方法,现在用的是css
<script type="text/javascript">
     var tables = document.getElementsByTagName("img");  //找到table标签
       for(var i = 0; i<tables.length; i++){  // 逐个改变
              tables[i].style.width = "100%";  // 宽度改为100%
               tables[i].style.height = "auto";
       }
  </script>
3.通过webview的setting属性设置,在我手机上没效果

        出现界面没自适应android屏幕时使用,不一定有效
        wv.getSettings().setUseWideViewPort(true);//关键点
        wv.getSettings().setLoadWithOverviewMode(true);
        /**
        * 用WebView显示图片,可使用这个参数 设置网页布局类型: 1、LayoutAlgorithm.NARROW_COLUMNS :
        * 适应内容大小 2、LayoutAlgorithm.SINGLE_COLUMN:适应屏幕,内容将自动缩放
        */
        wv.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

参考资料


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值