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

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

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 HTML_根据屏幕的大小自适应 rem布局

<!DOCTYPE html> <html> <head> <title>rem自适应</title> <style t

偏执的太偏执、/ 2022年11月07日 13:21/ 0 赞/ 237 阅读

相关 html如何加载图片

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

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

相关 Android 中Webview 自适应屏幕

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

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

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

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

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

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

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

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

相关 Android 中Webview 自适应屏幕

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

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

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

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

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