Question

我在Windows 8（Metro）应用程序中有一个webview，我将使用它来显示我的大部分内容。 webview会自动将任何CSS尺寸缩放到100％，140％和180％。这意味着当我指定：

#square {
    width:100px;
    height:100px;
    background-color:white;
}

...我们得到一个100,140或180个设备像素的漂亮方块，具体取决于显示器。到目前为止，非常好。

此外，如果我提供100px的图像，操作系统会在更高密度的屏幕上正确地将其缩放到140和180.

此外，如果我提供的图像版本为100px，140px和180px，我在CSS中将大小指示为100px，如下所示：

#my_image {
    width:100px;
    height:100px;
}

操作系统使用100 dp square的区域（也就是说，适当的方形为100,140或180个设备像素）并自动选择正确的图像。到目前为止，仍然很好。

当我尝试使用密度限定符的图像而没有在CSS中命名文字大小时，会出现问题。我为什么要这样做？我有很多可变尺寸的图像。我更愿意让webview根据图片的尺寸推断出合适的尺寸。

所以我希望如果我提供100,140和180版本的图像，那么操作系统就足够聪明地说，＆＃34;啊，这是一个100 dp的图片，碰巧有其他版本可用＆＃34;

然而，实际发生的是这个。

我提供图片：

square.scale-100.png
square.scale-140.png
square.scale-180.png

操作系统选择合适的一个。在180％的屏幕上，它选择180个设备像素平方的版本。但是，回想一下，我们制作了180个设备像素，因为它是100 dp图像的180％版本。我们希望它实际上只占用100x100 dp的空间。

但是，操作系统在DP中的大小为180。所以它再次将它缩放180％。

如何避免这种双重缩放？任何指针都会很棒！

Answer 1

我们已经找到了一个解决方案，我正在分享，以防它帮助其他任何人。

解决方案是包含动态编写的CSS，使用与当前比例因子相反的因子缩放图像。

当前比例因子可用于应用代码，但不适用于WebView中运行的Javascript。从这种Javascript的角度来看，所有尺寸都已经缩放。因此，例如，window.devicePixelRatio并不好 - 它总是返回1.

您可以在应用代码中获取当前比例因子，如下所示：

ResolutionScale scale = DisplayInformation.GetForCurrentView().ResolutionScale;

从这里，您可以得到这样的缩放因子：

float imageZoomFactor = 1.0F;
switch (DisplayInformation.GetForCurrentView().ResolutionScale)
{
    case ResolutionScale.Scale140Percent:
        imageZoomFactor = (1.0F / 1.4);
        break;

    // etc
}

您可以通过多种方式之一将其传递到Javascript中。由于我们从应用程序包中读取HTML并使用WebView.NavigateToString，因此我们在Javascript中创建了一个占位符，我们将其替换为字符串。 Javascript看起来像这样：

<!-- Scale images so that their sizes map 1:1 to device pixels -->
<script type="text/javascript" language="javascript">
    document.write('<style type="text/css">img {zoom:' + HOSTING_CODE_SUPPLIED_ZOOM_FACTOR + ';}</style>');
</script>

现在，当您使用图像标记而未指定显式尺寸时，它可以正常工作。例如，180px x 180px的图像是为了在180％模式下以100dp x 100dp显示而创建的，使用180个设备像素正确显示。

有一点需要注意的是，如果您有明确调整图像大小的CSS，则需要取消缩放。所以，例如：

#my_explicit_image { 
    width:200px;
    height:200px;
    zoom:normal;    /* cancel the zoom on img since we're being explicit */
}

如果您不包含最后一行，则img上指定的缩放将应用于您在此处指定的尺寸。

希望这有助于那里的人！

如何在Windows 8中使用WebView中的图像限定符而不指定高度和宽度

1 个答案: