WebView 加载html图片如何适应屏幕大小

骑猪看日落 2022-06-08 14:06 436阅读 0赞

当使用，WebView显示Html页面的时候，会发现图片大过手机的屏幕，需要拖动图片才可以查看，用户体验非常差，

实际上，要想使图片自适应屏幕大小，其实只要在

private final WebViewClient webViewClient = new WebViewClient() {
    
            @Override
            public boolean shouldOverrideUrlLoading(WebView webView, String url) {
                if (!TextUtils.isEmpty(url) && !Navigator.openStandardLink(webView.getContext(), url)) {
                    Navigator.openInBrowser(webView.getContext(), url);
                }
                return true;
            }
    
            @Override
            public void onPageFinished(WebView view, String url) {
                AlphaWebView.this.onPageFinished(url);
                // html加载完成之后，调用js的方法，使用该方法就可以使html中的图片适应屏幕大小
                imgReset();
            }
    
        };
       private void imgReset() {
            loadUrl("javascript:(function(){"
                    + "var objs = document.getElementsByTagName('img'); "
                    + "for(var i=0;i<objs.length;i++) " + "{"
                    + "var img = objs[i]; "
                    + " img.style.width = '100%'; "
                    + " img.style.height = 'auto'; "
                    + "}" + "})()");
        }

这样设置后图片就可以适应屏幕大小。

如果想了解详细一些的话，可以查看这个文字。  
[ 参考：android webview加载html图片自适应手机屏幕大小&点击查看大图][_android webview_html]

[_android webview_html]: http://blog.csdn.net/smileiam/article/details/72123227

发表评论取消回复

表情：

评论列表（有 0 条评论，436人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery中加载图片自适应大小设置问题

何在固定大小的div 中放置一个图片，当图片较小时显示实际大小，当图片超过div 大小时图片自动适应div 的大小实现过程的主要代码： .div...

港控/mmm°/ 2024年04月17日 05:21/ 0 赞/ 41 阅读

相关解决html中图片自适应屏幕大小的问题

解决html中图片自适应屏幕大小的问题一、问题重现二、解决方案三、修改之后，重新看一下页面，底部没有再出现空白，图片正常适应屏幕大小一、问题

清疚/ 2024年04月06日 13:52/ 0 赞/ 44 阅读

相关 Cell上webview加载自适应高度

Demo下载地址[Demo下载][Demo] 直接上代码吧，简单粗暴 - (void)viewDidLoad { [super viewDidLoa

柔情只为你懂/ 2023年10月17日 08:54/ 0 赞/ 1 阅读

相关【vue】自适应屏幕大小

需求：加一张图片，并自适配所有机型的宽度解决：只需要固定宽度为100%即可 <img class="img" src="@/assets/imgs/hom

比眉伴天荒/ 2023年09月26日 14:47/ 0 赞/ 118 阅读

相关 html如何加载图片

HTML 5 <img> 标签定义和用法 <img> 标签定义图像。 HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中，图像的

旧城等待，/ 2022年09月17日 05:27/ 0 赞/ 165 阅读

相关 Android 中Webview 自适应屏幕

webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮让Webv

以你之姓@/ 2022年08月13日 17:41/ 0 赞/ 205 阅读

相关 WebView 加载html图片如何适应屏幕大小

当使用，WebView显示Html页面的时候，会发现图片大过手机的屏幕，需要拖动图片才可以查看，用户体验非常差，实际上，要想使图片自适应屏幕大小，其实只要在 pr

骑猪看日落/ 2022年06月08日 14:06/ 0 赞/ 437 阅读

相关 html5 Canvas 如何自适应屏幕大小

最简单使用Canvas元素： <canvas width="300" height="300"></canvas> 这样就创建出一个空白画布。但是这样创建出

悠悠/ 2022年05月29日 07:18/ 0 赞/ 678 阅读

相关 Android 中Webview 自适应屏幕

webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮让Webv

野性酷女/ 2022年05月14日 00:09/ 0 赞/ 248 阅读

相关 Android WebView 图片自适应屏幕宽度

只需要在onPageFinished 中调用 imgReset（）方法 @Override public void onPageFinished(Web

妖狐艹你老母/ 2021年09月28日 02:54/ 0 赞/ 526 阅读