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

骑猪看日落 2022-06-08 14:06 509阅读 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 条评论，509人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 HTML背景图片自适应全屏幕

margin: 0px; background-image: url(/resource/error-bg.png); background-rep

拼搏现实的明天。/ 2023年06月27日 03:52/ 0 赞/ 46 阅读

相关 ReactNative WebView加载本地HTML

1. 用到的属性 source: 在WebView中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）。注意如果是载入 html

小灰灰/ 2023年02月21日 06:45/ 0 赞/ 28 阅读

相关 iOS WebView加载图片自适应屏幕的解决方案

iOS WebView加载图片自适应屏幕的解决方案参考文章： [（1）iOS WebView加载图片自适应屏幕的解决方案][1_iOS WebView] （2）http

以你之姓@/ 2023年02月16日 10:56/ 0 赞/ 29 阅读

相关 html如何加载图片

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

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

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

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

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

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

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

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

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

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

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