使用個別視窗載入和自動重新整理行為

發行項
01/28/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

JavaScript 應用程式中的每一個視窗都有自己的資源管理系統。 ResourceContext 如果使用者將應用程式視窗拖曳到不同 DPI 的監視器，或發生語言變更這類系統事件，或是您明確覆寫某個值，Windows 就會更新這個 ResourceContext。

雖然 JavaScript 應用程式中的資源 (透過 ms-appx: 和 ms-appx-web: 配置載入) 是使用資源管理系統進行解析，但並非所有資源都用於完成發出要求的視窗內容。只有以下類型的下載項目是使用視窗的 ResourceContext 進行解析：

CSS
- background-image
- border-image
- 產生的內容：list-style-image 和 content:url()
HTML
- 元素的背景屬性 (例如，<body background='logo.png'>...</body>)
- 影像元素的 src 屬性 (例如，<img src='logo.png' />)
- 內嵌元素的 src 屬性 (例如，<embed width="100" height="100" src="logo.png" type="image/png" />)
- 物件元素的 data 屬性 (例如，<object width="100" height="100" data="logo.png" type="image/png" />)
- 使用 <svg> 中 image 元素的 href 屬性載入的影像
JavaScript
- XHR (XMLHttpRequest)

如果您必須對照視窗的資源內容解析某個資源，但該資源不在前面的清單中 (例如，<link> 的 CSS)，您可以使用 XHR 擷取正確解析的檔案。

此外，JavaScript 應用程式支援特定影像的「自動重新整理」。這表示如果視窗的資源內容變更時，Windows 執行階段會自動 (視需要) 重新下載和重新顯示適當的影像。以下是此功能支援的影像類型：

CSS

background-image
border-image
產生的內容：list-style-image (但沒有 content:url())

在 Windows 8.1 和更新版本，CSS 因為使用「自動重新整理」功能而有所簡化。

例如，在沒有自動重新整理功能的 Windows 8，以下是 DPI 或語言變更時可能需要更新影像的 CSS：

    @media all and (max-resolution: 134dpi) {
        /* Load 100% image when scaled by 100% */
        div.imageBackground:-ms-lang(en) {
            background-image: url('logo.png?s=100&lang=en');
        }
        div.imageBackground:-ms-lang(fr) {
            background-image: url('logo.png?s=100&lang=fr');
        }
    }
    @media all and (min-resolution: 135dpi) {
        /* Load 140% image when scaled by 140% */
        div.imageBackground:-ms-lang(en) {
            background-image: url('logo.png?s=140&lang=en');
        }
        div.imageBackground:-ms-lang(fr) {
            background-image: url('logo.png?s=140&lang=fr');
        }
    }
    @media all and (min-resolution: 174dpi) {
        /* Load 180% image when scaled by 180% */
        div.imageBackground:-ms-lang(en) {
            background-image: url('logo.png?s=180&lang=en');
        }
        div.imageBackground:-ms-lang(fr) {
            background-image: url('logo.png?s=180&lang=fr');
        }
    }

在 Windows 8.1 和更新版本，前面的 CSS 程式碼只會變成：

    div.imageBackground {
        background-image: url('logo.png');
    }

共用方式為

使用個別視窗載入和自動重新整理行為

相關主題

其他資源