RWD 系列文章 》
畫面比例的縮放還可以進一步作彈性的設計，允許使用者作有限度的縮放，相關的支援參數為 minimum-scale 與 maximum-scale 。
以筆者的四吋手機為例，螢幕真正的寬度為 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 ，否則會沒有效果。
最後整理列舉所討論的參數如下：
RWD 系列文章 》
畫面比例的縮放還可以進一步作彈性的設計，允許使用者作有限度的縮放，相關的支援參數為 minimum-scale 與 maximum-scale 。
- minimum-scale：允許的最小縮放倍率。
- maximum-scale：允許的最大縮放倍率。
<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 系列文章 》
沒有留言:
張貼留言