Fatal编程技术网
  • java/
  • Java 视口匹配屏幕宽度和大图像

Java 视口匹配屏幕宽度和大图像

java android html webview

Java 视口匹配屏幕宽度和大图像,java,android,html,webview,Java,Android,Html,Webview,我正在尝试使用WebView来显示内置多点触摸的大图像，并试图避免内存崩溃 我将webView设置为： setInitialScale(20); WebSettings settings = getSettings(); settings.setJavaScriptEnabled(true); settings.setUseWideViewPort(true); settings.setLoadWithOverviewMode(true); set

我正在尝试使用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），效果会很好，并且图像适合屏幕宽度

但在我的示例中，如果图像大于7300x5200，则显示为放大，并且禁用了缩小

如果要测试图像，URL为：

&

注意：我不是该图像的所有者，我只是将其用于测试

我认为默认情况下，您的图像仍然比视口大。试试这个

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

如何：（收回-仍然不能正常工作）


视口=功能（宽度、高度）{
var theImage=document.getElementById（'theImage'）；
这个。宽度=宽度；
高度=高度；
this.set=函数（）{
var metas=document.getElementsByTagName（'meta'）；

对于（i=0；i我更喜欢网络开发人员，以下是在android ics浏览器上工作的代码，在网络视图中也应该如此：


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




html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#我的形象{
宽度：100%；
保证金：0；
填充：0；
}


我也试过了，这是一个更大的图像（），它工作得很顺利

希望有帮助

[编辑]

由于我没有足够的空间在评论中发布，我将把它放在那里：

基本上，您需要的是在图像高度达到全屏时立即切断视口底部。您需要一些javascript来实现这一点，而且由于javascript没有缩放事件，因此不需要进行任何修改。由于android支持flash，您可以尝试获得缩放事件的解决方案。一旦缩放达到最大值根据图像比率的不同，您可以将图像的css更新为高度：100%，并将宽度设置为自动

您基本上可以约束宽度或高度，具体取决于哪个是100%。
您可能还希望在用户缩放时将高度逐步设置为100%，无论哪种方式，您都会在某个点看到“跳跃”


请看一看帖子，这可能会对您有所帮助。
事实上，我做了一些有点违反直觉的事情，在ICS上实现了这一点。当其他人建议将
style=“width:100%”
添加到
img
标记中时，我的解决方案是实际添加
style=“height:100%”

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


  • 它避免了我测试的所有设备上的空白问题。

      

    • ICS在初始完全缩小的视图上显示空间，但当您放大时，它会完全按照您的需要消失
      • 

    • 在较旧的设备上，由于初始的缩放级别，下面永远不会有空白
      • 

    • 

  • 变焦不是完美的，但要好得多。

      

    • 在ICS上，您可以得到您想要的（匹配宽度）
      • 

    • 在较旧的设备上，缩放比问题的第二个示例中得到的要容易管理得多
      • 

    • 

    简言之，我已经满足了您对IC的要求，并让您在旧设备上更接近IC。如果我有其他想法，我会编辑我的答案，但这一点似乎值得分享，即使不完美。
    感谢您的回答，该选项的问题是，您在图像下方第一张图片中看到的白色区域就在那里即使在放大后，你也会想得到答案，但当你放大时，图像下方会留下一个很大的空白=（现在我明白你的意思了。我还没有明白。我会再试一次。谢谢你的回答，但它有相同的问题：当你放大图像时，下面的空白仍然存在。谢谢你的回答。顺便说一下，这是最好的方法。在其他版本中，获得与ICS相同的行为将是完美的

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