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

我正尝试使用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> 

问题是,如果它加载一个中等图像(例如1600×1200),它很好,图像适合屏幕宽度。

在这里输入图像说明

但是,如果图像在我的例子中是更大的7300×5200,它似乎像放大和禁用缩小。

在这里输入图像说明

如果你想testing的图像url是:

img1 & img2

注:我不是该图像的所有者,我只用它进行testing

Solutions Collecting From Web of "视口适合屏幕宽度和大图像"

我认为你的图片在默认情况下仍然会比视口大。 尝试这个

 <html> <head> <meta name="viewport" content="width=device-width, user-scalable=yes" /> </head> <body style="margin: 0; padding: 0"> <img alt="image" src="http://img.androidcookie.com/java/Wallpaper_2010_by_scrumen.png" id="theImage" style="width:100%" > </body> </html> 

不知道正确的答案,但可能walkarround可以将img最大宽度设置为“非常高的值”例如2 * screen.width当页面加载

我实际上是通过做一些有点反直觉的事情来完成ICS的工作。 而其他人则build议在img标签中添加style="width:100%" ,我的解决scheme是实际添加style="height:100%"

这适用于我的Android 4.0+设备,但不幸的是,它开始部分放大(所以图像高度填充视图)在我的旧设备上。

  1. 它避免了我testing的所有设备上的空白问题。
    • ICS在初始完全缩小视图上显示空间,但放大时,它会完全按照您的需要消失。
    • 在较旧的设备上,由于初始缩放级别,下面不会有空白区域。
  2. 变焦不是完美的,但更好。
    • 在ICS上,你得到了你想要的(匹配宽度)。
    • 在较旧的设备上,缩放比您在问题的第二个示例中获得的显着更易于pipe理。

简而言之,我已经满足了您在ICS上的要求,并使您在旧设备上更接近他们。 如果我想出了其他的东西,我会编辑我的答案,但是在这一点上,这似乎值得分享,即使不完善。

这个怎么样:(收回 – 仍然不正确)

 <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://img.androidcookie.com/java/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> 

我更关注一个web开发人员,这是在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://img.androidcookie.com/java/8UhBphVEae.jpg ),它工作顺利。

希望能帮助到你!

[编辑]

由于我没有足够的空间来发表评论,我会把它放在那里:

你想要的基本上是一旦你的图像高度全屏,切断视口的底部。 你需要一些JavaScript来做到这一点,而且由于JavaScript没有缩放事件,这不会需要一些黑客。 由于Android支持闪光灯,你可以尝试这个解决scheme来获取缩放事件。 一旦变焦达到一定的水平,这取决于图像比例,您更新您的图像的CSS高度:100%,并将宽度设置为自动。

你可以基本上约束宽度或高度取决于哪一个是100%。 当用户缩放时,您可能还想将渐进高度设置为100%,无论哪种方式,您都将在某个点看到“跳跃”。

看看这个post,这可能会帮助你。