響應式設計 - 設定Viewport 參數 2/3

RWD 系列文章 》

除了標準的 device-width ,Viewport 還提供了其它數個參數供進一步的設定,首先來看initial-scale ,這個參數讓你可以指定顯示畫面時所要放大畫面的倍率,設定格式如下:

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

以逗號隔開的第二組參數將initial-scale 設定為 2 ,表示畫面將放大兩倍呈現。考慮以下的左截圖,其中設定 initial-scale=1 ,右圖則是 initial-scale=2 呈現的結果。


除了設定螢幕畫面的呈現,在預設的情形下,使用者可以透過兩指操作縮放螢幕畫面,例如將放大的畫面重新縮小至完整呈現圖片內容的大小:

若是想要固定畫面,避免使用者進行縮放操作可以設定 user-scalable 這個參數,user-scalable=yes 表示可以讓使用者縮放,反之為 user-scalable=no。所以想要確切的在使用者的手機裝置上顯示所要呈現的畫面比例,並且不希望使用者縮放畫面則設定以下的參數即可。

<meta name="viewport" 
content="width=device-width,initial-scale=1,user-scalable:no" >

》指定固定呈現尺寸

如果要固定螢幕的呈現尺寸,可以直接以像素為單位進行指定,例如 width=600 表示手機螢幕將會呈現 600px 寬的內容。以下建立一個網頁 size.html ,於其中配置數個寬 50px 的色塊,色塊中的數字為色塊右邊界所在螢幕的位置寬度,最右邊色塊所在位置為 1100 px 寬,在一般桌機螢幕上呈現的外觀如下:

【點圖可放大】

這是在寬度 1680px 的螢幕上呈現的外觀。現在直接於手機上瀏覽此網頁,會得到以下的結果:

【點圖可放大】

筆者手機內建預設為 980px 寬,因此最右邊的色塊為 980px ,超出的部份則配置於下一行,如果將手機橫放,你會看到相同的配置。現在進行以下的調整:

<meta name="viewport"  content="width=device-width,initial-scale=1,user-scalable:no"  >

其中以螢幕真正的寬度 320px 進行呈現,出現以下的結果:


到目為止為稍早所討論的內容,接下來將寬度固定為 600px 如下:

<meta name="viewport"  content="width=600,initial-scale=1,user-scalable:no"  >

再一次瀏覽網頁,會得到以下的結果,其中的寬度以 600px 為基礎呈現。



RWD 系列文章 》


沒有留言: