裝置適應

身為 Web (或使用 JavaScript 的 Windows 市集應用程式) 開發人員,您正面臨一個困境:編寫網站程式碼以便儘可能地使用許多裝置、大小以及解析度;或是甘冒讓您的內容被截斷 (固定式配置) 或雜亂無章 (流動配置) 而與使用者背道而馳的風險。@-ms-viewport 規則搭配階層式樣式表 (CSS) 媒體查詢,嘗試努力解決這個困境,讓 Web 開發人員以及 Windows 8 中使用 JavaScript 的 Windows 市集應用程式的開發人員,在投入最少精力的情況下,最佳化網站和應用程式的配置來適應不同的裝置。

@-ms-viewport 規則是以 @viewport 規則為基礎,定義於 CSS 裝置適應規格中。此規格目前仍是工作草稿階段。請注意,Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式中的 @-ms-viewport 實作不一定和規格中定義的資訊完全相同。它會隨著 CSS 裝置適應規格的修訂和改善一起變更。

以窄視窗檢視網站

在非常窄的視窗中檢視現今網路上的大部分網站並不是很實用。固定式配置中的內容可能會被裁剪,而流動配置中的內容則會變得雜亂無章。Windows 8 中的應用程式案例經常涉及很窄的視窗。為了避免出現內容裁剪或雜亂無章的問題,會自動縮小內容。雖然開發人員並不需要額外花費心力,但這畢竟不是最理想的方式 (一切都取決於內容的預設寬度)。使用者每次需要存取內容時都被迫縮放內容的大小。

藉由使用 @-ms-viewport 規則,您可以更簡單快速提供最佳化的網站與應用程式。為了不強迫您因適應「不分大小,一律符合所有檢視」的情況,而必須放大太小的 UI 或過分壓縮大的 UI,您可以使用 @-ms-viewport 與對 CSS 媒體查詢的現有支援,來最佳化網站或應用程式以便適應不同的解析度範圍。您可以指定針對特殊範圍最佳化的網頁,要以更自然的方式縮放,以適應該範圍內解析度的裝置。這種方式能讓您不只是針對桌面顯示器最佳化您的網站,甚至讓網站也可以支援小型平板電腦或貼齊狀態。

使用 @-ms-viewport 規則

@-ms-viewport 規則和媒體查詢搭配使用,可協助您最佳化配置。通常,您會在媒體查詢中加入巢狀 @-ms-viewport 規則,如下列虛擬程式碼片段所示:

@media [media query logic here] {
  @-ms-viewport {
    [viewport size here]
  }
  [CSS for this layout combination goes here.]
}

請注意,在 Internet Explorer 10 以外的瀏覽器 (或者在舊版 Windows Internet Explorer) 中,這段 CSS 會大幅降級。如果無法辨識 @-ms-viewport 規則及其內容,則會直接加以忽略。

用法範例:以貼齊狀態最佳化的網頁

下列範例顯示 @-ms-viewport 規則的常見用法。具體而言,這個選取器可以用來最佳化以貼齊狀態檢視的小版本網頁。

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width Modern taskbar layout goes here */
} 

任何寬度小於 400 像素的檢視區 (例如,貼齊狀態) 都會配置為 320 像素並縮放比例以調整大小。將會套用列在它下方的 CSS (假設已根據小螢幕最佳化)。

用法範例:固定大小應用程式

以下是一個非常基本的 @-ms-viewport 規則使用範例,沒有任何媒體查詢 (代表該規則適用於所有情況)。


@-ms-viewport {
  width: 1024px;
  height: 768px;
}

這個範例可用於鎖定在橫向模式的使用 JavaScript 的 Windows 市集應用程式。它指定,不論顯示器的解析度或顯示器比例 (4:3、16:9 寬螢幕等等) 為何,顯示的內容 (「檢視區」) 一律必須至少為 1024 像素 x 768 像素。例如,在顯示器為 1920 像素 x 1080 像素 (16:9 寬螢幕比例) 的情況,檢視區會根據顯示器高度來放大調整。由於這是一個寬螢幕應用程式器,您可以使用 CSS 中達成「垂直黑邊」(檢視區兩側有黑邊) 效果的一般方法,將應用程式置於中央。在 1280×960 顯示器中,由於它的外觀比例等於 1024×768 檢視區的外觀比例,因此會放大檢視區以填滿整個螢幕。

我們可以擴充這個範例,在這個應用程式中加入允許橫向與直向模式的媒體查詢:


@media screen and (orientation: landscape) {
  @-ms-viewport {
    width: 1024px;
    height: 768px;
  }
  /* CSS for landscape layout goes here */
}

@media screen and (orientation: portrait) {
  @-ms-viewport {
    width: 768px;
    height: 1024px;
  }
  /* CSS for portrait layout goes here */
}

這個範例的效果和上一個範例相同,差別在於第二個 @media 規則會將直向方向列入考量。在直向模式的情況下,內容的方向可能會變更 (文字與圖片可能因方向不同而有不同的配置),但檢視區保留相同。寬度和高度值已經交換,但可見內容區域不會改變。

用法範例:寬度最佳化

下列網頁的縮放行為範例已經使用媒體查詢與 @-ms-viewport 進行寬度最佳化。請注意,每個媒體查詢涵蓋不同的解析度範圍。@-ms-viewport 規則會在每個範圍內指定一個寬度,讓任何屬於該範圍的裝置都會按比例調整成該寬度。每個規則之後的 CSS 接著會精確定義如何顯示已經按比例調整成該解析度範圍的內容。


@media screen and (max-width: 400px) {
    @-ms-viewport { width: 320px; }
    /* CSS for 320px layout goes here */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
    @-ms-viewport { width: 400px; }
    /* CSS for 400px layout goes here */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
    @-ms-viewport { width: 640px; }
    /* CSS for 640px layout goes here */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    @-ms-viewport { width: 1024px; }
    /* CSS for 1024px layout goes here */
}

@media screen and (min-width: 1366px) {
    /* CSS for 1366px layout goes here */
}

用法範例:不使用自動縮放比例

根據預設,當視窗窄於 1024 像素時,新 Windows UI 中採用新 Windows UI 的 Internet Explorer 會自動調整內容的比例。 這種調整主要包含貼齊狀態與直向模式。

不過,在不需要或不想要這種自動縮放比例的情況下,您可以使用 device-width 關鍵字。 這個關鍵字表示網頁已經最佳化,無論裝置是哪一種寬度都可以正常運作。


@-ms-viewport { width: device-width; }

使用這個關鍵字時,請確定網頁能夠繼續在窄貼齊狀態與直向模式運作。

API 參考

Device Adaptation

範例和教學課程

設計彈性網站

Internet Explorer Test Drive 示範

輕鬆上手!

IEBlog 文章

讓您的網站適應不同的視窗大小
使用 IE10 Release Preview 讓 Web 更穩定

規格

CSS 裝置適應

相關主題

媒體查詢與接聽程式

 

 

顯示:
© 2014 Microsoft