视口适合屏幕宽度和大图像
Posted
技术标签:
【中文标题】视口适合屏幕宽度和大图像【英文标题】：Viewport fit screen width and big images 【发布时间】：2012-05-19 14:36:36 【问题描述】：我正在尝试使用 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
src="THE_SRC_GOES_HERE"
id="theImage"
>
</body>
问题在于，如果它加载一个中等大小的图像（例如 1600x1200），它会很好地工作并且图像适合屏幕宽度。
但如果在我的示例中图像更大 7300x5200，它看起来就像放大并且禁用了缩小。
如果你想测试图片的url是：
img1 & img2
注意：我不是该图像的所有者，我只是将其用于测试
【问题讨论】：
【参考方案1】：我实际上是通过做一些违反直觉的事情来实现这一点的。虽然其他人建议将style="width:100%" 添加到img 标签，但我的解决方案是实际添加style="height:100%"。
这适用于我的 android 4.0+ 设备，但不幸的是，它在我的旧设备上开始部分放大（因此图像高度填充视图）。
-
它避免了我测试的所有设备上的空白问题。
ICS 在初始完全缩小的视图中显示空间，但当您放大时，它会完全按照您的意愿消失。
在旧设备上，由于初始缩放级别，下方永远不会有空白。
缩放并不完美，但要好得多。
在 ICS 上，您得到的正是您想要的（匹配宽度）。
在较旧的设备上，缩放比您在问题的第二个示例中得到的更易于管理。
简而言之，我已经满足了您对 ICS 的要求，并让您在旧设备上更接近它们。如果我想出其他任何内容，我会编辑我的答案，但在这一点上这似乎值得分享，即使不完美。
【讨论】：
感谢您的回答。顺便说一句，这是最好的方法。在其他版本中获得与 ICS 中相同的行为将是完美的【参考方案2】：我更喜欢 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://macjacart.ca/admin/Product_Images/8UhBphVEae.jpg），效果很好。
希望对你有帮助！
[编辑]
由于我没有足够的空间将其发布在 cmets 中，我将其放在那里：
您想要的基本上是在图像高度占据全屏后立即切断视口的底部。您需要一些 javascript 来做到这一点，并且由于 javascript 没有缩放事件，因此不需要一些 hack。由于 android 支持 flash，您可以尝试this 解决方案来获取缩放事件。一旦缩放达到一定水平，这取决于图像比例，您将图像的 css 更新为 height:100%，并将宽度设置为 auto。
您基本上可以根据哪一个是 100% 来限制宽度或高度。 您可能还希望在用户缩放时将高度逐渐设置为 100%，无论哪种方式，您都会在某个点看到“跳跃”。
也可以查看this 的帖子，这可能会对您有所帮助。
【讨论】：
感谢您的回答，但它有同样的问题：当您放大图像时，下面的空白仍然存在【参考方案3】：这个怎么样：（撤回 - 仍然无法正常工作）
<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)"
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>
【讨论】：
感谢您的回答，但是当您放大时，它会在图像下方留下一个很大的空白区域。 =( 现在我明白你的意思了。我没有抓住那个。我会再试一次。【参考方案4】：不知道正确答案，但可能的 walkarround 可以将 img max-width 设置为“非非常高的值”，例如加载页面时 2*screen.width
【讨论】：
【参考方案5】：我认为默认情况下您的图像最终仍然大于视口。试试这个
<html>
<head>
<meta
name="viewport"
content="width=device-width, user-scalable=yes"
/>
</head>
<body
style="margin: 0; padding: 0">
<img
src="http://www.deviantart.com/download/165022929/Wallpaper_2010_by_scrumen.png"
id="theImage"
style="width:100%"
>
</body>
</html>
【讨论】：
感谢您的回答，该选项的问题是您在图片下方第一张图片中看到的白色区域即使在放大后仍然存在以上是关于视口适合屏幕宽度和大图像的主要内容，如果未能解决你的问题，请参考以下文章
Android Webview - 使用一个 loadUrl 缩放图像以正确适合屏幕
具有 100% 宽度的 CSS 背景图像和动画滚动直到图像完成