移動版網頁自動縮放問題

最近纔開始接觸開發移動版網頁碰到許多問題，尤爲是頁面的大小縮放問題。看了一些別的移動版網站的源代碼發如今head裏面多了一個meta標籤，代碼以下：

1	< meta name = "viewport" content = "target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5, user-scalable=yes" >

查找了一下相關資料纔算是明白了上面那行代碼的意思：

target-densitydpi=device-dpi ：在作手機版的頁面時，若是使用了此屬性那麼頁面中的內容會很小，好像分辨率越大的手機屏幕顯示的效果越小，若是不用這個屬性那麼手機瀏覽器會自動放大到必定大小（這個應該是手機默認的）便於閱讀效果。聽說平板電腦用這個屬性比較好。

width=device-width ：設置了這個屬性後頁面的寬度就不會超過屏幕的寬度，即頁面的寬度等於屏幕的寬度。

initial-scale=1.0 ：頁面初始放大或縮小的比例，1.0則表示沒有放大或縮小。

minimum-scale=1.0 ：頁面縮小的最小的比例。1.0則表示頁面縮小的比例最小爲1。0倍，即原始的大小。

maximum-scale=1.5 ：頁面放大最大的比例。1.5則表示頁面放大的比例最大爲1.5倍。

user-scalable=yes ：設置頁面是否能夠放大縮小。yes表示能夠，no則表示不能夠。

 

剛剛接觸移動版網頁的開發，記錄一下。

純HTML+CSS打造組織架構圖：http://www.xiaoboy.com/detail/1341545068.html

SaySlide，基於jQuery的焦點圖

http://www.xiaoboy.com/Plugins/Sayslide2/