如何在網頁上檢測移動設備的命中

將移動設備重定向到移動內容或設計

多年來,專家一直在說移動設備訪問者的網站訪問量急劇增加。 出於這個原因,許多公司已經巧妙地開始為他們的在線業務採用移動戰略,創造適合電話和其他移動設備的體驗。

一旦您花時間學習如何為手機設計網頁並實施您的策略,您還需要確保您網站的訪問者可以看到這些設計。 有很多方法可以做到這一點,有些工作比別人更好。 下面看看您可以用來在您的網站上實現移動支持的方法 - 以及接近尾聲的建議,以了解在今天的Web上實現此目標的最佳方法!

提供到其他網站版本的鏈接

這是目前處理手機用戶最簡單的方法。 與其擔心他們是否能看到您的網頁,只需將頁面頂部附近的某個鏈接指向您的網站的單獨移動版本即可。 然後讀者可以自己選擇是想看到移動版本還是繼續使用“正常”版本。

這個解決方案的好處是它很容易實現。 它要求您為移動設備創建優化版本,然後在常規網站頁面頂部附近的某個位置添加鏈接。

缺點是:

最終,這種方法是過時的,不太可能成為現代移動戰略的一部分。 它有時被用作停止間隙修復,而更好的解決方案正在開發中,但在這一點上它確實是一個短期的創可貼。

使用JavaScript

在上述方法的變體中,一些開發人員使用某種類型的瀏覽器檢測腳本來檢測客戶是否在移動設備上,然後將他們重定向到單獨的移動站點。 瀏覽器檢測和移動設備的問題在於,那裡有數以千計的移動設備。 試圖用一個JavaScript來檢測它們可能會把你所有的頁面變成下載的惡夢 - 而且你仍然會遇到與上述方法相同的許多缺點。

使用CSS媒體手持設備

CSS命令@media手持設備似乎是一種理想的方式來顯示手持設備的CSS樣式 - 比如手機。 這似乎是顯示移動設備頁面的理想解決方案。 你寫一個網頁,然後創建兩個樣式表。 第一個用於“屏幕”媒體類型的頁面適合顯示器和電腦屏幕。 第二個用於“手持設備”的風格適合那些手機等小設備。 聽起來很容易,但它在實踐中並不真正起作用。

這種方法最大的優點是你不必維護你的網站的兩個版本。 你只需要維護它,樣式表定義了它應該看起來的樣子 - 這實際上更接近我們想要的最終解決方案。

這種方法的一個問題是,許多手機不支持手持媒體類型 - 他們用屏幕媒體類型來顯示他們的頁面。 許多舊手機和手持設備根本不支持CSS。 最後,這種方法不可靠,因此很少用於提供移動版本的網站。

使用PHP,JSP,ASP來檢測用戶代理

這是將移動用戶重定向到移動版網站的好方法,因為它不依賴於移動設備不使用的腳本語言或CSS。 相反,它使用服務器端語言(PHP,ASP,JSP,ColdFusion等)查看用戶代理,然後將HTTP請求更改為指向移動設備的移動頁面。

一個簡單的PHP代碼來做到這一點看起來像這樣:

stristr($ ua,“Windows CE”)或者
stristr($ ua,“AvantGo”)或
stristr($ ua,“Mazingo”)或
stristr($ ua,“移動”)或
stristr($ ua,“T68”)或
stristr($ ua,“Syncalot”)或
stristr($ ua,“Blazer”)){
$ DEVICE_TYPE =“MOBILE”;
}
if(isset($ DEVICE_TYPE)and $ DEVICE_TYPE ==“MOBILE”){
$位置='移動/ index.php的';
header('Location:'。$ location);
出口;
}
?>

這裡的問題是移動設備使用了許多其他潛在的用戶代理。 這個腳本會捕獲並重定向它們中的很多,但不是全部。 而且更多的是隨時添加的。

另外,與上述其他解決方案一樣,您仍然必須為這些讀者維護一個單獨的移動網站! 必須管理兩個(或更多!)網站的這個缺點足以成為尋求更好解決方案的理由。

使用WURFL

如果您仍然決定將您的移動用戶重定向到一個單獨的站點,那麼WURFL(無線通用資源文件)是一個很好的解決方案。 這是一個XML文件(現在是一個DB文件)以及各種DBI庫,它們不僅包含最新的無線用戶代理數據,還包含那些用戶代理支持的功能和功能。

要使用WURFL,請下載XML配置文件,然後選擇您的語言並在您的網站上實施API。 有用於使用Java,PHP,Perl,Ruby,Python,Net,XSLT和C ++的WURFL的工具。

使用WURFL的好處是有很多人隨時更新和添加到配置文件中。 因此,儘管您使用的文件幾乎在完成下載之前已過時,但如果您每月下載一次左右,則可能會有您的讀者習慣使用的所有移動瀏覽器,而無需任何問題。 不利的一面是,您必須不斷下載並更新這些內容 - 所有這些都可以讓用戶訪問第二個網站以及創建的缺點。

最佳解決方案是響應式設計

因此,如果為不同設備維護不同的網站不是答案,那是什麼? 響應式網頁設計

響應式設計是您使用CSS媒體查詢為各種寬度設備定義樣式的地方。 響應式設計允許您為移動和非移動用戶創建一個網頁。 然後,您不必擔心要在移動網站上顯示哪些內容,或者記住將最新更改傳輸到您的移動網站。 另外,一旦你寫好了CSS,你就不必下載任何新的東西。

響應式設計可能無法在極其陳舊的設備和瀏覽器上正常工作(其中大部分目前使用量非常小,不應該擔心您的擔憂),但是因為它具有附加性(向內容添加樣式,而不是採用內容這些讀者仍然可以閱讀您的網站,但在舊設備或瀏覽器上看起來不太理想。