如何讓網頁在手機上無法縮放?

  • Prototype Hacker Leo Hsu #leo.hsu
  • Mar 3
  • HTML

現在人手一支智慧型手機、平板,相信大家在行動裝置上瀏覽網頁時,一定碰過這種狀況:

點了搜尋框,畫面就自己放大,導致看不到網頁全貌,

 

 

 

 

 

 

 

 

這時只要在<head>標籤中加入下面這行程式碼:

就可以讓畫面在點擊文字輸入框時維持固定大小。

這一行程式碼在做什麼呢?

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)