現在人手一支智慧型手機、平板,相信大家在行動裝置上瀏覽網頁時,一定碰過這種狀況:
點了搜尋框,畫面就自己放大,導致看不到網頁全貌,
這時只要在<head>標籤中加入下面這行程式碼:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
就可以讓畫面在點擊文字輸入框時維持固定大小。
這一行程式碼在做什麼呢?
viewport的作用是告訴瀏覽器,目前裝置有多寬(高),以便在縮放時有個參考基準。
width 設為 device-width,用意是適應各家裝置的大小,
如果這邊width沒有設定的話,就會依照 html, css 給予的 width 當作預設值。
設定手機螢幕畫面的初始縮放比例為 100%。
設定畫面最大放大比例為 100%。
設為no,表示不允許使用者縮放頁面。
這邊有一點要注意,若非RWD網站使用了這行程式碼,
會導致使用者永遠只能檢視網站的一部分,如同上面的圖例,
而且只能透過滑動頁面來檢視內容,無法自行放大縮小。
根據W3C草案,在meta tag中viewport有以下屬性可以進行設定:
width:可設定數值,或者指定為 device-width
height:可設定數值,或者指定為 device-height
initial-scale:第一次進入頁面的初始比例,最小 0.25,最大 5
minimum-scale:允許縮小最小比例,最小 0.25,最大 5
maximum-scale:允許放大最大比例,最小 0.25,最大 5
user-scalable:允許使用者縮放,1 or 0 (yes or no)