Question

我正在使用Webview和一些css3来加载图片并让它缩放以填充任何尺寸的Android设备上的屏幕。

不幸的是，我收到报告说，在较小的屏幕上，图像没有正确缩放并被剪裁。剪切图像时，它也不可滚动。我想让它扩展到任何设备上的屏幕，但如果不可能，它至少应该是可滚动的。

以下是代码：

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>*************</title>

    <style>
        * { margin: 0; padding: 0; }

        html { 
            background: url(images/1_1.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
        p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
    </style>
</head>

<body bgcolor="#000000">



</body>

</html>

XML

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="#000000" android:layout_width="fill_parent" android:layout_height="fill_parent">
<WebView  
    android:id="@+id/mapview"
    android:background="#000000" android:scaleType="centerInside" android:layout_gravity="center_vertical|center_horizontal" android:clickable="false" android:fitsSystemWindows="true" android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </LinearLayout>

有什么想法吗？

Answer 1

如果你只是在html中有一张图片，并希望图片在宽度上适合设备，你可以使用这段代码：

<head>
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
</head>

如果您的html很复杂，并且您希望控制在不同密度设备上显示html的更多细节，那就像使用不同密度设备的不同CSS一样。阅读此android document。我认为它会对你有帮助。

Answer 2

你可以用这个：

<img src="images/1_1.jpg" width="100%" style="position:fixed" />
<div style="width:100%;overflow:scroll-y;position:fixed;height:100%"></div>

div将是页面所有其他内容的占位符。我的意思是你写的任何其他标签就像它的身体标签一样。

Answer 3

为溢出创建一个css规范，就像这样

img {
  overflow: scroll;
}

如果没有在html中看到使用过的图像，我就不能多说了。（你在哪里使用image / Empty body标签？）

Answer 4

可能是因为你给了背景：固定＆amp;封面，因为“封面”将图像扫描到整个anoroid屏幕并固定是粘贴图像到背景所以它不滚动图像，但只是内容只能滚动尝试在页面上添加更多内容并测试你的自我......

Answer 5

我没有对它进行过广泛的测试，但是最后一次我尝试将图像缩放到WebView中任何Android设备屏幕的整个宽度时，我最终动态地注入了一些CSS代码以利用max-width属性。对于我测试的一小部分设备，这似乎工作得很好。

为了利用max-width属性，我只是将最大宽度指定为相对宽度，并通过将其设置为100%来填充整个宽度：

img {
    max-width: 100%;
}

显然，这只会缩小较大的图像（而不是高档图像），但对于大多数应用来说这可能都没问题。

作为脚注：如果您只显示单个图像，还可以考虑在ImageView中加载它。这将是更“原生”的方法，可能会让您更好地控制它的缩放和显示方式。

Webview + CSS3无法在较小的屏幕上正确缩放图像

5 个答案: