Question

我正在尝试使用WebView通过内置多点触控显示大图像并尝试避免内存崩溃。

我以这种方式设置webView：

    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>

问题在于，如果它加载了一个中等图像（例如1600x1200），它效果很好，图像适合屏幕宽度。

enter image description here

但是如果在我的例子中图像更大7300x5200，它看起来像放大并且缩小了禁用。

enter image description here

如果你想测试图片的网址是：

img1＆amp; img2

注意：我不是该图片的所有者，我只是用它进行测试

Answer 1

我认为默认情况下，您的图片最终会比视口大。试试这个

<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>

Answer 2

不知道正确的答案但是可能的walkarround可以将 img max-width 设置为“非常高的值”，例如2 * screen.width页面加载时

Answer 3

我实际上是通过做一些反直觉的事情来解决这个问题。虽然其他人建议在style="width:100%"标记中添加img，但我的解决方案是实际添加style="height:100%"。

这适用于我的Android 4.0+设备，但不幸的是它在我的旧设备上开始部分放大（因此图像高度填满了视图）。

它避免了我测试的所有设备上的空白区域问题。
- ICS在初始完全缩小的视图中显示空间，但在放大时，它会完全消失。
- 在较旧的设备上，由于初始缩放级别，下面永远不会有空白区域。
变焦并不完美，但要好得多。
- 在ICS上，您可以得到您想要的（匹配宽度）。
- 在较旧的设备上，缩放比您在问题中的第二个示例中所获得的内容更易于管理。

简而言之，我已经满足了您对ICS的要求，并使您在旧设备上更接近它们。如果我想出其他任何内容，我会编辑我的答案，但这点似乎值得分享，即使不完美。

Answer 4

这个怎么样:(缩回 - 仍然无法正常工作）

<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>

Answer 5

我更喜欢网络开发者，这里是适用于android ics浏览器的代码，这在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帖子，这可能对您有帮助。

视口适合屏幕宽度和大图像

5 个答案: