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

我的Windows8（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;
}

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

    // etc
}

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

操作系统使用100 dp平方的区域（即，100、140或180设备像素平方，视情况而定），并自动选择正确的图像。到目前为止，还不错

当我尝试使用带有密度限定符的图像而不在CSS中命名文字大小时，就会出现问题。我为什么要这么做？我有很多不同大小的图片。我更喜欢只允许webview根据图像的尺寸推断出合适的大小

因此，我希望如果我提供100、140和180个版本的映像，操作系统将足够聪明地说，“啊，这是一个100 dp的映像，碰巧有其他版本可用。”

然而，实际情况是这样的

我提供图像：

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

操作系统选择合适的一个。在180%屏幕上，它选择180个设备像素正方形的版本。然而，回想一下，我们将其设置为180个设备像素，因为它是100 dp图像的180%版本。我们希望它实际上只占用100x100 dp的空间

但是，操作系统的DP大小为180。因此，它又将其扩展了180%。

---

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

我们已经找到了一个解决方案，我正在分享，以防对其他人有所帮助

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

当前比例因子可用于应用程序代码，但不可用于运行在

WebView

中的Javascript。从这种Javascript的角度来看，所有维度都已经被缩放了。因此，例如，

window.devicePixelRatio

不好——它总是返回1

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

ResolutionScale scale = DisplayInformation.GetForCurrentView().ResolutionScale;

由此，可以导出如下所示的缩放因子：

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

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

    // etc
}

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

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

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

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

    // etc
}

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

如果不包括最后一行，则

img

上指定的缩放将应用于此处指定的尺寸

希望这有助于其他人