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 系列文章 》
沒有留言:
張貼留言