視口適合屏幕寬度和大圖像

我想要使用WebView來顯示內置多點觸摸的大圖像，並試圖避免內存崩潰。視口適合屏幕寬度和大圖像

我設置web視圖是這樣的：

setInitialScale(20); 
    WebSettings settings = getSettings(); 
    settings.setJavaScriptEnabled(true); 
    settings.setUseWideViewPort(true); 
    settings.setLoadWithOverviewMode(true); 
    settings.setSupportZoom(true); 
    settings.setBuiltInZoomControls(true);

，然後加載下面的代碼：

<head> 
<meta 
    name="viewport" 
    content="width=device-width, user-scalable=yes" 
/> 

</head> 
<body 
    style="margin: 0; padding: 0"> 
    <img 
     alt="image" 
     src="THE_SRC_GOES_HERE" 
     id="theImage" 
    > 
</body>

的問題是，如果它加載介質圖像（1600×1200爲例）它的作品不錯圖像適合屏幕寬度。

enter image description here

但如果圖像是在我的例子更大7300x5200，它看起來像放大和變焦出禁用。

enter image description here

如果你想測試的圖片網址是：

img1 & img2

注：我不是那種圖像的所有者和我只使用它用於測試

來源

2012-05-11 Addev

我認爲你的圖像依然默認大於默認視口。試試這個

<html> 
<head> 
<meta 
    name="viewport" 
    content="width=device-width, user-scalable=yes" 
/> 

</head> 
<body 
    style="margin: 0; padding: 0"> 
    <img 
     alt="image" 
     src="http://www.deviantart.com/download/165022929/Wallpaper_2010_by_scrumen.png" 
     id="theImage" 
     style="width:100%" 
    > 
</body> 
</html>

來源

2012-05-14 21:08:25 ghostfly

謝謝您的回答，與該選項的問題是，您在圖片下面的第一個圖片中看到的白色區域，即使在 – Addev

不知道正確的答案，但可能walkarround可以設置IMG最大寬度一個「非價值很高」，例如2 * screen.width頁面時加載

來源

2012-05-19 13:59:18 Caroline

如何：（收回 - 仍然沒有工作的權利）

<html> 
<head> 
<meta 
    name="viewport" 
    content="width=device-width, user-scalable=yes" 
/> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
</head> 
<body 
    style="margin: 0; padding: 0"> 
    <img onload="view = new Viewport(this.width, this.height)" 
     alt="image" 
     src="http://orbitingeden.com/orrery/textures/stars.jpg" 
     id="theImage" 
    > 
<script> 
    Viewport = function(width, height){ 
     var theImage = document.getElementById('theImage'); 
     this.width = width; 
     this.height = height; 
     this.set = function(){ 
      var metas = document.getElementsByTagName('meta'); 
      for(i=0; i<metas.length; i++){ 
       if(metas[i].name == 'viewport'){ 
        metas[i].setAttribute('content','width=' + width + 
           ', height='+ height + ', user-scalable=yes'); 
        theImage.style.width = '100%'; 
       } 
      } 
     } 
     this.set(); 
    } 
    $('body').bind("gesturechange", function(event) { 
     view.set(); 
    }); 

</script> 
</body> 
</html>

來源

2012-06-18 19:31:18

謝謝您的回答變焦後是有，但它留下的圖像下方大空的空間，當你也放大。 =（ – Addev

現在我明白你的意思了，我沒有抓到，我會再試一次 –

我更掀起了網絡developper，這裏是在Android瀏覽器IC的工作代碼，這應該工作同樣在webview中：

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width"> 
<style> 
    html,body{ 
     width:100%; 
     height:100%; 
     margin:0; 
     padding:0; 
    } 
    #my-image{ 
     width:100%; 
     margin:0; 
     padding:0; 
    } 
</style> 

</head> 
<body> 
    <img id="my-image" src="http://gachie.blog.com/files/2011/06/tour_eiffel.jpg"/> 
</body>

我試了一下，這是一個很大的圖像（http://macjacart.ca/admin/Product_Images/8UhBphVEae.jpg），它工作順利。

希望它有幫助！

[編輯]

，因爲我沒有足夠的空間將它張貼在評論，我把它放在那裏：

你需要的是基本儘快切斷視口底部因爲你的圖像高度需要全屏。你需要一些JavaScript來做到這一點，並且由於JavaScript沒有縮放事件，所以不需要一些黑客。由於Android支持Flash，因此您可以嘗試this解決方案以獲取縮放事件。只要縮放比例達到一定水平（取決於圖像比例），就可以用高度：100％更新圖像的CSS，並將寬度設置爲自動。

你可以基本上約束寬度或高度取決於哪一個是100％。您可能還想在用戶縮放時將漸進高度設置爲100％，無論哪種方式您都會在某個點看到「跳躍」。

看看this後爲好，這可能會幫助你。

來源

2012-06-20 23:11:21

感謝你的回答，但它有同樣的問題：當你放大圖像時，下面的空白處仍然存在 – Addev

我實際上已經通過做一些有點違反直覺的方式來解決ICS問題。而其他人建議將style="width:100%"添加到img標記，我的解決方案是實際添加style="height:100%"。

這對我的作品在我的Android 4.0+設備，但不幸的是它開始在局部放大（使圖像高度填充視圖）在我的舊設備。

它避免了我測試的所有設備上的空白問題。
- ICS在初始完全縮小視圖上顯示空間，但隨着放大，它會完全按照您的需要消失。
- 在較舊的設備上，由於初始縮放級別，以下從不會有空白空間。
變焦是不完美的，但要好得多。
- 在ICS上，您可以得到您想要的（匹配寬度）。
- 在較舊的設備上，縮放比您在問題的第二個示例中獲得的顯着更易於管理。

總之，我對ICS滿足您的要求，並得到你更接近他們的舊設備。如果我想出了其他任何東西，我會編輯我的答案，但是這一點似乎值得分享，即使不完善。

來源

2012-06-23 10:59:48

謝謝爲了你的答案，順便提一下，這是最好的方法，在其他版本中獲得與ICS相同的行爲 – Addev

視口適合屏幕寬度和大圖像

回答

相關問題