做一個WAP網站,其實也沒有那麼神秘,甚至比PC版的網站還要容易些,因為很少圖檔和樣式,返璞歸真。
一、用什麼來開發?
據說以前的手機版要用什麼WML,我沒學過,一聽頭都大了,時間花費不起。幸虧現在手機都支援HTML,是以,就用HTML,也就是我們平時在電腦上做的網站,駕輕就熟,輕車熟路。
二、識别手機浏覽器,自動轉向WAP版。
在主站上加入識别功能,發現用戶端是手機浏覽器的話,自動轉向WAP版。代碼抄自網際網路
#region 手機檢測
/**Wap網關特有和某些手機終端浏覽器特有的頭資訊*/
private static string[] mobileHeaders = new string[]{
"HTTP_X_UP_CALLING_LINE_ID",//cmwap情況下中國移動的手機号碼,目前基本沒有這個head了
"x-up-calling-line-id",//uniwap情況下下中國聯通手機号碼,例如:x-up-calling-line-id=8615***618119,某些移動網關也用這個header放手機号碼
"x-wap-profile",//手機終端才會有的uaprof檔案url,例如:x-wap-profile="http://nds1.nds.nokia.com/uaprof/Nokia5800d-1r100-2G.xml "
"X_WAP_PROFILE",//X_WAP_PROFILE=http://nds1.nds.nokia.com/uaprof/N6670r100.xml
"X-Nokia-MusicShop-Bearer",//諾基亞手機送來的網絡類型,例如X-Nokia-MusicShop-Bearer=GPRS/3G
"X-Nokia-MusicShop-Version",//諾基亞網關送的參數,例如:X-Nokia-MusicShop-Version=11.1014.15
"x-up-bear-type",//wap網關的參數,疑似上網類型,例如:x-up-bear-type=GPRS,或x-up-bear- type=GPRS/EDGE,X-Up-Bearer-Type=CSD,x-up-bear-type=CDMA CSD,x-up-bear-type=TD-SCDMA
"X-Nokia-BEARER",//諾基亞wap網關的參數,疑似上網類型,例如:X-Nokia-BEARER=WCDMA,或X-Nokia-BEARER=GPRS
"X-Nokia-Gateway-Id",//諾基亞wap網關的參數,例如:X-Nokia-Gateway-Id=NBG/3.0/1,或X-Nokia-gateway-id=NWG/4.1/Build4.1.04
"X-Nokia-MSISDN",//諾基亞wap網關的參數,疑似使用者手機号碼,例如X-Nokia-MSISDN=861860*******
"x-source-id",//cmwap網關參數,例如:x-source-id=220.206.156.33,也有:X-Source-ID=FZGGSN31
"X-Nokia-CONNECTION_MODE",//wap網關參數,例如:X-Nokia-CONNECTION_MODE=TCP
"X-Nokia-MaxDownlinkBitrate",//諾基亞wap網關參數,含義未知,例如:X-Nokia-MaxDownlinkBitrate=0
"X-Nokia-MaxUplinkBitrate",//諾基亞wap網關參數,含義未知,例如:X-Nokia-MaxUplinkBitrate=0
"Bearer-Indication",//不明參數,例如:Bearer-Indication=11, Bearer-Indication=gsm_gprs_ipv4
"X_NETWORK_INFO",//X_NETWORK_INFO=GPRS,86136********,10.100.246.217,cmwap,unsecured
"x-NAS-Identifier",//含義不明,例如:x-NAS-Identifier=fj-telecom-cdma-pdsn
"x-online-host",//cmwap用戶端向cmwap指定header,不知道怎麼的移動把它送給伺服器了,例如:x-online-host=b.wap.618119.com:80
"X_WAP_CLIENTID",//疑似加密處理後的使用者身份資訊,例如X_WAP_CLIENTID=618119**********
//以下是OperaMini特有的header ,see: http://dev.opera.com/articles/view/opera-mini-request-headers/
"X-OperaMini-Features",//OperaMini特有的用戶端特性描述。例如:X-OperaMini- Features=advanced, download, file_system,X-OperaMini-Features=advanced, file_system, camera, touch, folding
"X-OperaMini-Phone-UA",//OperaMini特有的傳原始UserAgent的header。例如:X-OperaMini- Phone-UA=BlackBerry8310/4.5.0.174 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/107,此時的User-Agent=Opera/9.80 (BlackBerry; Opera Mini/5.1.22555/20.2485; U; zh) Presto/2.5.25
"X-OperaMini-Phone",//OperaMini特有的自己提取的機型資訊,品牌和型号直接用井号隔開,資訊不靠譜,例如:X-OperaMini-Phone=BlackBerry # BlackBerry 8310
"X-OperaMini-UA",//OperaMini特有的ua描述資訊,例如:X-OperaMini-UA=Opera Mini/5.1.22555/hifi/om511china/zh
};
/**Wap網關Via頭資訊中特有的描述資訊*/
private static string[] mobileGateWayHeaders = new string[]{
"ZXWAP",//中興提供的wap網關的via資訊,例如:Via=ZXWAP GateWay,ZTE Technologies,
"chinamobile.com",//中國移動的諾基亞wap網關,例如:Via=WTP/1.1 GDSZ-PB-GW003-WAP07.gd.chinamobile.com (Nokia WAP Gateway 4.1 CD1/ECD13_D/4.1.04)
"monternet.com",//移動夢網的網關,例如:Via=WTP/1.1 BJBJ-PS-WAP1-GW08.bj1.monternet.com. (Nokia WAP Gateway 4.1 CD1/ECD13_E/4.1.05)
"infoX",//華為提供的wap網關,例如:Via=HTTP/1.1 GDGZ-PS-GW011-WAP2 (infoX-WISG, Huawei Technologies),或Via=infoX WAP Gateway V300R001, Huawei Technologies
"XMS 724Solutions HTG",//國外電信營運商的wap網關,不知道是哪一家
"wap.lizongbo.com",//自己測試時模拟的頭資訊
"Bytemobile",//貌似是一個給移動網際網路提供解決方案提高網絡運作效率的,例如:Via=1.1 Bytemobile OSN WebProxy/5.1
};
/**電腦上的IE或Firefox浏覽器等的User-Agent關鍵詞*/
private static string[] pcHeaders = new string[]{
"Windows 98",
"Windows ME",
"Windows 2000",
"Windows XP",
"Windows NT",
"Ubuntu",
};
/**手機浏覽器的User-Agent裡的關鍵詞*/
private static string[] mobileUserAgents = new string[]{
"Nokia",//諾基亞,有山寨機也寫這個的,總還算是手機,Mozilla/5.0 (Nokia5800 XpressMusic)UC AppleWebkit(like Gecko) Safari/530
"SAMSUNG",//三星手機 SAMSUNG-GT-B7722/1.0+SHP/VPP/R5+Dolfin/1.5+Nextreaming+SMM-MMS/1.2.0+profile/MIDP-2.1+configuration/CLDC-1.1
"MIDP-2",//j2me2.0,Mozilla/5.0 (SymbianOS/9.3; U; Series60/3.2 NokiaE75-1 /110.48.125 Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413
"CLDC1.1",//M600/MIDP2.0/CLDC1.1/Screen-240X320
"SymbianOS",//塞班系統的,
"MAUI",//MTK山寨機預設ua
"UNTRUSTED/1.0",//疑似山寨機的ua,基本可以确定還是手機
"Windows CE",//Windows CE,Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)
"iPhone",//iPhone是否也轉wap?不管它,先區分出來再說。Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; zh-cn) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117
"iPad",//iPad的ua,Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; zh-cn) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B367 Safari/531.21.10
"Android",//Android是否也轉wap?Mozilla/5.0 (Linux; U; Android 2.1-update1; zh-cn; XT800 Build/TITA_M2_16.22.7) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
"BlackBerry",//BlackBerry8310/2.7.0.106-4.5.0.182
"UCWEB",//ucweb是否隻給wap頁面? Nokia5800 XpressMusic/UCWEB7.5.0.66/50/999
"ucweb",//小寫的ucweb,貌似是uc的代理伺服器,Mozilla/6.0 (compatible; MSIE 6.0;) Opera ucweb-squid
"BREW",//很奇怪的ua,例如:REW-Applet/0x20068888 (BREW/3.1.5.20; DeviceId: 40105; Lang: zhcn) ucweb-squid
"J2ME",//,很奇怪的ua,隻有J2ME四個字母
"YULONG",//宇龍手機,YULONG-CoolpadN68/10.14 IPANEL/2.0 CTC/1.0
"YuLong",//還是宇龍
"COOLPAD",//宇龍酷派,YL-COOLPADS100/08.10.S100 POLARIS/2.9 CTC/1.0
"TIANYU",//天語手機,TIANYU-KTOUCH/V209/MIDP2.0/CLDC1.1/Screen-240X320
"TY-",//天語,TY-F6229/701116_6215_V0230 JUPITOR/2.2 CTC/1.0
"K-Touch",//還是天語,K-Touch_N2200_CMCC/TBG110022_1223_V0801 MTK/6223 Release/30.07.2008 Browser/WAP2.0
"Haier",//海爾手機,Haier-HG-M217_CMCC/3.0 Release/12.1.2007 Browser/WAP2.0
"DOPOD",//多普達手機,
"Lenovo",//聯想手機,Lenovo-P650WG/S100 LMP/LML Release/2010.02.22 Profile/MIDP2.0 Configuration/CLDC1.1
"LENOVO",//聯想手機,比如:LENOVO-P780/176A
"HUAQIN",//華勤手機
"AIGO-",//愛國者居然也出過手機,AIGO-800C/2.04 TMSS-BROWSER/1.0.0 CTC/1.0
"CTC/1.0",//含義不明
"CTC/2.0",//含義不明
"CMCC",//移動定制手機,K-Touch_N2200_CMCC/TBG110022_1223_V0801 MTK/6223 Release/30.07.2008 Browser/WAP2.0
"DAXIAN",//大顯手機,DAXIAN X180 UP.Browser/6.2.3.2(GUI) MMP/2.0
"MOT-",//摩托羅拉,MOT-MOTOROKRE6/1.0 LinuxOS/2.4.20 Release/8.4.2006 Browser/Opera8.00 Profile/MIDP2.0 Configuration/CLDC1.1 Software/R533_G_11.10.54R
"SonyEricsson",//索愛手機,SonyEricssonP990i/R100 Mozilla/4.0 (compatible; MSIE 6.0; Symbian OS; 405) Opera 8.65 [zh-CN]
"GIONEE",//金立手機
"HTC",//HTC手機
"ZTE",//中興手機,ZTE-A211/P109A2V1.0.0/WAP2.0 Profile
"HUAWEI",//華為手機,
"webOS",//palm手機,Mozilla/5.0 (webOS/1.4.5; U; zh-CN) AppleWebKit/532.2 (KHTML, like Gecko) Version/1.0 Safari/532.2 Pre/1.0
"GoBrowser",//3g GoBrowser.User-Agent=Nokia5230/GoBrowser/2.0.290 Safari
"IEMobile",//Windows CE手機自帶浏覽器,
"WAP2.0",//支援wap 2.0的
};
/**
* 根據目前請求的特征,判斷該請求是否來自手機終端,主要檢測特殊的頭資訊,以及user-Agent這個header
* @param request http請求
* @return 如果命中手機特征規則,則傳回對應的特征字元串
*/
public static bool IsFromMobile(HttpRequest request)
{// 識别目前請求,針對來自手機的請求則跳轉到wap頁面。
return GetFromMobileRule(request) != null;
}
public static string GetFromMobileRule(HttpRequest request)
{
string userAgent = request.UserAgent;
if (userAgent != null)
{
foreach (string mheader in pcHeaders)
{
if (userAgent.IndexOf(mheader) != -1)
{
return null;
}
}
}
foreach (string mheader in mobileHeaders)
{// 隻要存在網關特有的header,肯定是手機
if (request.Headers.Get(mheader) != null && request.Headers.Get(mheader).Length > 0)
{
return mheader;
}
}
string via = request.Headers.Get("Via");
if (via != null)
{
foreach (string mheader in mobileGateWayHeaders)
{// 是不是wap網關的描述
if (via.IndexOf(mheader) != -1)
{
return mheader;
}
}
}
if (userAgent != null)
{
foreach (string mheader in mobileUserAgents)
{
if (userAgent.IndexOf(mheader) != -1)
{
return mheader;
}
}
}
return null;
}
#endregion
基本都是檢測Request.UserAgent
注意:國内很流行的UC浏覽器,沒有什麼明顯的特征,以上方法無法檢測
三、手機浏覽器功能很弱
javascript?不支援,不要用。CSS,可以;連結,可以。字型?不要設定什麼font-size=12px,在某些浏覽器上,幾乎無法辨認。是以索性不設定字型大小,由浏覽器自動調整。
四、頁面緩存問題很嚴重。
發現手機浏覽器,緩存情況非常嚴重,一個頁面浏覽一次,以後打開,都是同樣内容。一定要做一些聲明。我從新浪手機版微網誌上抄了一些
,做成母版頁,所有頁面都繼承之。
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="base.master.cs" Inherits="master_base" %>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0"/>
<meta name="MobileOptimized" content="240"/>
五、伺服器端有些功能無法使用,否則會報錯
如檢測請求來源,Request.UrlReferrer,這些頁面在手機上運作會報錯。
六、UC浏覽器
個人感覺這是個很爛的浏覽器,但在國内據說卻很火。這可能是真的,我的手機,有自帶的浏覽器,也有這個UCWEB。
嚴格意義上來說,UCWEB不是一個浏覽器,據說你用它來上網的時候,其實是先通路它,由它來裝載、解釋、處理你要通路的頁面,再傳回給你。
是以有時候在别的手機浏覽器上好好的,在UCWEB這裡,就出問題。
比如,它不支援一些樣式,象字型加粗,下劃線,等等
不支援伺服器端的重定向Response.Redirect()。準确的是,是部分支援。比如說,在a頁面Response.Redirect("b.aspx"),它确實轉向了b,但浏覽器的位址,還是停留在a頁面上,沒有轉換為b位址。假如a和b都在同一個目錄下,看不出有問題,但假如不是,象a轉向了../b,然後b轉向c,就報錯了,因為a目錄下沒有c頁面。