-
#leo.hsu
- Mar 3
- HTML
現在人手一支智慧型手機、平板，相信大家在行動裝置上瀏覽網頁時，一定碰過這種狀況:
點了搜尋框，畫面就自己放大，導致看不到網頁全貌，
這時只要在<head>標籤中加入下面這行程式碼:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
就可以讓畫面在點擊文字輸入框時維持固定大小。
這一行程式碼在做什麼呢?
viewport
viewport的作用是告訴瀏覽器，目前裝置有多寬(高)，以便在縮放時有個參考基準。
width=device-width
width 設為 device-width，用意是適應各家裝置的大小，
如果這邊width沒有設定的話，就會依照 html, css 給予的 width 當作預設值。
initial-scale = 1
設定手機螢幕畫面的初始縮放比例為 100%。
maximum-scale = 1
設定畫面最大放大比例為 100%。
user-scalable = no
設為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)