Android的WebView可以自動調整大圖像的大小嗎？

在某些網絡瀏覽器中，巨大的圖像會自動調整大小以適合屏幕。Android的WebView可以自動調整大圖像的大小嗎？

是否可以在Android WebView中做同樣的事情？

該網頁只包含圖像，也許添加一些JavaScript可以做到這一點？
有人已經這樣做了？

注：我不知道圖像的大小提前。

2010-06-23 Nicolas Raoul

是的，這是可能的。您可以嘗試使用下面的代碼設置WebView佈局。它將所有圖像（大於Device Screen Width）調整爲屏幕寬度。這適用於兩個方向（縱向和橫向）

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

您可以添加額外的利潤/填充後得到間隔的權利。

來源

2012-09-08 00:29:20 Sheharyar

+1我還沒有嘗試過，但它聽起來很完美，比使用JavaScript更好。 – 2012-09-08 05:03:13

工程，在2.2.1,3.2和4.0.3測試。 'minSdkVersion =「8」''targetSdkVersion =「15」'和'android-support-v4.jar'。非常簡單而有效！ – Ruben 2012-09-12 10:02:33

工程就像一個魅力，謝謝。 – 2013-02-13 14:29:31

您可以讓瀏覽器調整圖像大小爲您適合屏幕的最大寬度：

<img src="huge-image.jpg" width="100%" />

重新調整其高度的WebView視也是可能的：

<img src="huge-image.jpg" height="100%" />

然而，調整寬度和高度都會導致圖像拉伸。要麼調整取決於哪些方面最適合的寬度和高度，你可以考慮一些JavaScript，像這樣：

<img src="huge-image.jpg" onload="resize(this);" /> 


<script type="text/javascript"> 

    function resize(image) 
    { 
     var differenceHeight = document.body.clientHeight - image.clientHeight; 
     var differenceWidth = document.body.clientWidth - image.clientWidth; 
     if (differenceHeight < 0) differenceHeight = differenceHeight * -1; 
     if (differenceWidth < 0) differenceWidth = differenceWidth * -1; 

     if (differenceHeight > differenceWidth) 
     { 
      image.style['height'] = document.body.clientHeight + 'px'; 
     } 
     else 
     { 
      image.style['width'] = document.body.clientWidth + 'px'; 
     } 

     // Optional: remove margins or compensate for offset. 
     image.style['margin'] = 0; 
     document.body.style['margin'] = 0; 
    } 

</script>

來源

2010-12-02 21:52:49

這很好，但它會縮小放大。知道任何解決方法嗎？ – 2011-02-17 05:42:04

如果您[只調整寬度]（http://stackoverflow.com/questions/3923610/fit-image-in-webview/24072099#24072099），高度將按比例調整大小。 – 2015-12-08 17:24:38

-1

你可以在請求參數發送給您想要的大小，讓服務器設置寬度/ img元素中的高度爲你。

來源

2011-03-17 09:36:58 Roland

問題是我不知道圖像的大小。 – 2011-03-17 16:52:28

您可以使用此：

WebView webView = (WebView) findViewById(R.id.myWebView); 
webView.getSettings().setLoadWithOverviewMode(true); 
webView.getSettings().setUseWideViewPort(true);

發現這個解決方案在這裏： How to set the initial zoom/width for a webview

來源

2011-10-26 20:28:40 AndyB

如果您WebView寬度fill_parent，那麼你可以使用此代碼：

Display display=getWindowManager().getDefaultDisplay(); 
int width=display.getWidth(); 
String data="<img src='http://example.com/image.jpg' style='width:"+width+"px' />"; 
webView.loadData(data, "text/html", "utf-8");

和縮放仍加工！

相同的方法，如果height是fill_parent。

來源

2012-06-14 13:34:33

啊，一個問題是，只有寬度調整，我想保持比例... – 2012-06-15 02:16:20

@NicolasRaoul我測試了它在Android 4.0.3 - 比例是相同的 – 2012-06-15 09:08:25

有趣的是，我將不得不嘗試！ – 2012-06-15 09:10:13

我最喜歡的：

String data = "<html><body ><img id=\"resizeImage\" src=\""+PictureURL+"\" width=\"100%\" alt=\"\" align=\"middle\" /></body></html>"; 
webview.loadData(data, "text/html; charset=UTF-8", null);

來源

2013-06-29 21:30:18

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

作品，但deprecated。這是另一種沒有LayoutAlgorithm.SINGLE_COLUMN的解決方案，使用CSS：

@SuppressLint("NewApi") 
private openWebView() { 
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { 
     webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING); 
    } else { 
     webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NORMAL); 
    } 
    String data = "<div> your HTML content </div>"; 
    webView.loadDataWithBaseURL("file:///android_asset/", getHtmlData(data), "text/html", "utf-8", null); 
} 

private String getHtmlData(String bodyHTML) { 
    String head = "<head><style>img{max-width: 100%; width:auto; height: auto;}</style></head>"; 
    return "<html>" + head + "<body>" + bodyHTML + "</body></html>"; 
}

來源

2013-11-25 12:13:29

+1事實上'LayoutAlgorithm.SINGLE_COLUMN'似乎已被棄用，所以Sheharyar的解決方案變得不那麼有吸引力... – 2013-11-27 09:04:35

工作正常... :) – 2015-01-29 13:20:08

偉大的解決方案！謝謝！ – 2015-03-03 12:35:37

Android的WebView可以自動調整大圖像的大小嗎？

回答

相關問題