10
4

5 回答 5

4

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

<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-14T21:08:25.297 回答
3

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

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

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

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

于 2012-06-23T10:59:48.457 回答
3

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

于 2012-05-19T13:59:18.217 回答
2

我更喜欢网络开发人员，这是适用于 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 没有缩放事件，因此不需要一些 hack。由于 android 支持 flash，您可以尝试此解决方案来获取缩放事件。一旦缩放达到一定水平，这取决于图像比例，您将图像的 css 更新为 height:100%，并将宽度设置为 auto。

您基本上可以根据哪一个是 100% 来限制宽度或高度。您可能还希望在用户缩放时将高度逐渐设置为 100%，无论哪种方式，您都会在某个时候看到“跳跃”。

也看看这篇文章，这可能会对你有所帮助。

于 2012-06-20T23:11:21.267 回答
2

这个怎么样：（撤回 - 仍然无法正常工作）

<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-18T19:31:18.070 回答