手機網頁, 網頁設計

手機網頁教學-手機版網頁檔頭宣告設定

梅干2010/10/15
梅問題-手機網頁-手機網頁檔頭宣告設定
  先前梅干已分享一篇,手機版網頁自動切換,當會自動切換後,接下來就是要開始來製作手機版的網頁囉!其實看起來手機中的瀏覽器與電腦相同,只要電腦版能正常運作,在手機上應該都可正常預覽,確實是如此但今天若要專門讓手機來瀏覽時,這時就有點不太相同了,除了版面要另外設計外,還有一個相當重要的東西,那就是版頭的宣告,一般在作網頁時,上面所宣告的是給電腦版使用,若用此宣告放到手機版時,則會發現到怎網頁的版面都縮小,這是由於手機內建的瀏覽器,當網頁為電腦版就會把版面撐到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" />

梅問題-手機網頁-手機網頁檔頭宣告設定
  當加完畢後,這時再用手機瀏覽看看,這時版面就不會縮起來,就會依照手機的顯示尺寸,只要一個小動作卻有180度的大不同,而梅干也弄了個小範例,一個是有加手機版網頁宣告,另一個是一般的網頁宣告,各位可以用手機瀏覽看看喔!若你也正準備開始著手開發手機網頁時,別忘了記得要加入手機版的網頁宣告喔!
[手機版網頁宣告] [電腦版網頁宣告]
UAG軍規iPhone防摔殼