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

Question

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

我正在尝试使用WebView显示内置多点触控的大图像,并尝试避免内存崩溃.

我这样设置webView:

    setInitialScale(20);
    WebSettings settings = getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    settings.setSupportZoom(true);
    settings.setBuiltInZoomControls(true);

Run Code Online (Sandbox Code Playgroud)

然后加载以下代码:

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

Run Code Online (Sandbox Code Playgroud)

问题是,如果它加载一个中等图像(例如1600x1200),它工作得很好,图像适合屏幕宽度.

在此输入图像描述

但是如果在我的示例中图像更大7300x5200,它看起来像放大并禁用缩小.

在此输入图像描述

如果你想测试图像网址是:

img1& img2

注意:我不是那些图像的所有者,我只是用它进行测试

Answer 1

gho*_*fly 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，6 月前
查看次数：	3264 次
最近记录：	10 年，3 月前