首页 > 代码库 > WebView加载完网页之后利用js进行网页刷新，解决webview显示图片适应所有的机型

WebView加载完网页之后利用js进行网页刷新，解决webview显示图片适应所有的机型

2024-07-20 23:51:46   222人阅读

android：

/**

* 自动以的webviewclient
* @author jwguo
*
*/
private class MyWebViewClient extends WebViewClient {


        @Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
        view.loadUrl("javascript:var imgs = document.getElementsByTagName(‘img‘);for(var i = 0; i<imgs.length; i++){imgs[i].style.width = ‘100%‘;imgs[i].style.height = ‘auto‘;}");
}


@Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // TODO Auto-generated method stub
            view.loadUrl(url);
            return true;
        }

    }

webview.setWebViewClient(new MyWebViewClient());

这样就可以了，注入的js代码有点web基础的人都看的懂，就是获取html中所有的img标签，然后添加个style宽100%，高度自适应而已。


IOS：
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    [HUD show:NO];
    [HUD removeFromSuperview];
    
    [webView stringByEvaluatingJavaScriptFromString:
     @"javascript:var imgs = document.getElementsByTagName(‘img‘);"
     "for(var i = 0; i<imgs.length; i++){"
     "imgs[i].style.width = ‘100%‘;"
     "imgs[i].style.height = ‘auto‘;}"];
}


上面就是正确的做法，当然了js代码不止这一种，你可以随意发挥，下面我们来看看其他的做法。

一：

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

比如这个，这个是网上最常见的解决方案，但是，这个并不好，因为这会缩放整个网站以便一屏幕宽度显示，这样字体一样会变小，那样虽然图片全屏显示了，但是文字看不到了，所以没有办法只缩小图片，而不处理文字，但是上面的方式是没有问题的。


二：

这个方法也是不好的。

对于IOS有这么一种处理方法，http://stackoverflow.com/questions/7085800/adjusting-font-size-and-image-in-uiwebview-ios

为了方便还在GFW内的同学，老外给的答案是：

(void)webViewDidFinishLoad:(UIWebView *)wView {
    [wView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName(‘body‘)[0].style.webkitTextSizeAdjust= ‘50%‘"];
    [wView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName(‘body‘)[0].style.zoom= ‘0.5‘"];
}
IOS代码看不懂也没有关系，我们可以大概理解下，就是拿到html的body标签，然后修改它的style属性，设置文字为原始的50%（你可以可以设置为100%），把缩放比例设置为0.5，那么显而易见的，我们既缩放了页面的其他元素，又没有改变文字的大小，这总可以了吧，但是会有下面两个问题：

1.zoom设置缩放为0.5这个比例是没有根据的，原始尺寸的0.5并不是适应我们屏幕的结果，可能在一些恰好的机器上是没有问题的，在分辨率或大或小的机器上，总还会显示不正确的。

2.这个方法在android上是无法复制的，我不知道到底是android的webview内核chrome(4.4之后修改了内核)或者webkit的问题，他正确解析了zoom属性，但是无法正确解析webkitTextSizeAdjust属性，那么结果是显而易见的，和方法一没什么区别。

其实方法二使用的就是我的解决方法，只不过使用js不太对而已。







WebView加载完网页之后利用js进行网页刷新，解决webview显示图片适应所有的机型


联系
我们