響應式設計 - 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
網頁允許放大的最最大寬度倍率。


RWD 系列文章 》

沒有留言: