原文網址：http://www.minwt.com/?p=2529
以下原文轉載
---------------------------------------------------------------------------------------------
先前梅干已分享一篇，手機版網頁自動切換，當會自動切換後，接下來就是要開始來製作手機版的網頁囉！其實看起來手機中的瀏覽器與電腦相同，只要電腦版能正常運作，在手機上應該都可正常預覽，確實是如此但今天若要專門讓手機來瀏覽時，這時就有點不太相同了，除了版面要另外設計外，還有一個相當重要的東西，那就是版頭的宣告，一般在作網頁時，上面所宣告的是給電腦版使用，若用此宣告放到手機版時，則會發現到怎網頁的版面都縮小，這是由於手機內建的瀏覽器，當網頁為電腦版就會把版面撐到980像素，所以當要開始製作手機版網頁時，首先要做就是版頭的宣告，這樣網頁在手機下，才可正常顯示手機版的尺寸大小。
在宣告的部分有二種方式，一種是加在html上，另一種是加在<head>~</head>之間，二者取其一就行了，若要二邊都加的話也可以。
方法一、加在<html>上方：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
方法二、加在<head>~</head>之間：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
當加完畢後，這時再用手機瀏覽看看，這時版面就不會縮起來，就會依照手機的顯示尺寸，只要一個小動作卻有１８０度的大不同，而梅干也弄了個小範例，一個是有加手機版網頁宣告，另一個是一般的網頁宣告，各位可以用手機瀏覽看看喔！若你也正準備開始著手開發手機網頁時，別忘了記得要加入手機版的網頁宣告喔！
全站熱搜
留言列表
