網 頁自動切換合適的網頁後，接下來就是要開始來製作手機版的網頁囉！手機或是電腦的網頁看起來是相同，只要電腦版能正常運作，在手機上應該都可正常預覽，如 果要專門讓手機來瀏覽時，這時就有點不太相同了，除了版面要另外設計外，還有一個相當重要的東西，那就是HTML檔頭的宣告，一般在設計網頁時，上面所宣 告的是給電腦版使用，目前大多使用XHTML的設定，若用此宣告放到手機版時，則會發現到怎網頁的版面都縮小，這是由於手機內建的瀏覽器，當網頁為電腦版 就會把版面撐到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" />
完成這些動作後，再用手機瀏覽看看，這時版面就不會縮起來，就會依照手機的顯示尺寸，只要一個小動作卻有１８０度的大不同！要不然忌諱做出怪怪的手機專屬網頁喔！
文章提供:: BAYSTARS DESIGN網頁設計公司
文章標籤
全站熱搜
留言列表
