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

图片自适应屏幕技巧

最新推荐文章于 2022-08-11 00:48:06 发布

原创最新推荐文章于 2022-08-11 00:48:06 发布 · 4.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webview #屏幕自适应 #图片

Android 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了三种让图片自适应屏幕宽度的方法：一是使用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);

参考资料