響應式設計 - Viewport 的縮放限制設定 3/3

RWD 系列文章 》

畫面比例的縮放還可以進一步作彈性的設計，允許使用者作有限度的縮放，相關的支援參數為 minimum-scale 與 maximum-scale 。

• minimum-scale：允許的最小縮放倍率。
• maximum-scale：允許的最大縮放倍率。

一開始載入時，瀏覽器會根據Viewport 中的 width 參數為基準，以 initial-scale 指定的倍數呈現網頁，而使用者對畫面進行縮放時， maximum-scale 為允許放大的最大倍數，minimum-scale 則是允許的最小縮小倍數。回到前一篇示範的 size.html ，調整其中的 Viewport設定如下：

<meta name="viewport"

       content="width=device-width,initial-scale=4.0,   

       minimum-scale=2.0,maximum-scale=6.0">

以筆者的四吋手機為例，螢幕真正的寬度為 320px，width 的設定值 device-width　表示以此寬度為基準，若是沒有經過任何設定，呈現的畫面如下左圖，其中顯示的寬度為 320px（一個色塊為50px） 。

現在透過手機瀏覽來看這個範例頁的結果，由於 initial-scale 參數值等於 4 ，表示網頁第一次載入時要以 width 的四倍大呈現，因此得到以上的右圖畫面。

如你所見，網頁上的尺寸標示色塊表示螢幕寬度只能呈現 80px 寬度的內容，也就是 320px的1/4。現在嘗試將其放放大，最大只能到 maximum-scale 參數指定的 6 倍如下：

由於放大了6倍，因此只能呈現 320px的1/6 。現在將其縮小，由於 minimum-scale 參數指定為 2 ，因此最小只能到縮小至原始寬度的兩倍，呈現的內容則是 320px的1/2 如下：

initial-scale、maximum-scale 與minimum-scale 會相互影響，縮放操作以 initial-scale 為基準，maximum-scale　指定的縮放倍數必須大於 initial-scale ，如果小於 initial-scale 則會以 maximum-scale 的倍數為初始值，同理， minimum-scale 必須小於 initial-scale ，否則會沒有效果。

最後整理列舉所討論的參數如下：

參數	說明
width	螢幕所能呈現的寬度，device-width 表示以裝置本身的設計實體寬度為基準。
user-scalable	指定使用者是否可以利用兩指縮放網頁內容，yes 表示可以，no則不行。
initial-scale	網頁初始載入的寬度倍率。
minimum-scale	網頁允許縮小的最小寬度倍率。
maximum-scale	網頁允許放大的最最大寬度倍率。

• 響應式設計 - Viewport 的縮放限制設定 3/3
• 響應式設計 - 設定Viewport 參數 2/3
• 響應式設計 - 從 viewport 開始 1/3

RWD 系列文章 》