在設計行動版網站時,如何避免點選表單欄位時自動放大

How to prevent iPhone auto zooming on input form
 
在我們進行行動版網站設計的時候,
不管是留言板或是訂單等等,
頁面總是不免會出現一些表單欄位,
當然,
透過CSS的一些技巧,
絕大多數的表單欄位、下拉選單等等都不會是問題,
不過有很多朋友們發現,
如果在手機版的網站中,
一旦點擊了文字欄位或是下拉選單,
那麼 iPhone 就會自動放大整個頁面(Zoom in),
雖然這似乎是美意一樁,
可以讓網友們打字時更便利,
但問題是放大之後,就算離開這個欄位,
頁面也不會自動還原為原來的大小,
這樣就讓人苦惱了。
 
那要如何避免行動版網站點選欄位表單時,自動放大的問題呢
 
要解決這個小問題,
其實也不難,就是在網頁碼的檔頭部位,
宣告頁面檢視模式(Viewport)的地方調整一下描述就可以了。
 
一般我們會這樣宣告 Viewport:
<meta name=viewport content="width=device-width, initial-scale=1.0">

把描述改為:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
改為這樣,就是強制瀏覽器永遠無法放大,就算是使用者自行用手指撐開,網頁也不會有任何反應。
 
如果我們希望行動版網頁是可以讓網友自行放大的(有時候看圖片或是其他的小區塊文字,可以放大的使用體驗會比較好),
那麼就可以在一般的頁面上,採用原本不設限的 Veiwport 描述,
而有欄位、表單等設計的頁面中,
再改為強制無法放大,
這樣就可以了喔 ^^
 
試試看吧!
 
 
 

Readers comment