有很多策略從現在發展一個現代的，與設備無關的濟南網站建設時選擇。 應如何設備或瀏覽器的能力來決定的？ 應該表現邏輯是服務器端或客戶端？ 傳統上，手機優化必須發生服務器端。
在過去的幾年中，響應性的Web設計和工具，如Modernizr的 已經變得非常流行。 近日，聯合技術（通常稱為RESS ），其中優化既做服務器端和客戶端，已經成為一種趨勢。 最近推出的WURFL.js 工具，就是這一類。
在這篇文章中，我們將看看如何使用WURFL.js優化無論是在HTML和CSS的用戶體驗，以及如何選擇合適的廣告顯示在不同的設備為例的一些基本用例。 我們還將看到WURFL.js是如何從不同，但互補的，流行的功能檢測庫Modernizr的。
曾幾何時，設備檢測
無論我們使用的是JavaScript中，Modernizr的或完整的正則表達式設備描述庫中 （DDR）為服務器端檢測，其目的通常是一樣的：給用戶帶來更好的體驗。 這通常發生在兩個層面：
- 演示文稿的內容和互動服務，
- 分析用戶行為以確定使用模式。
目前的挑戰是要做到這一點的方式是可伸縮的，可維護，并盡可能多地，容易實現。 對于一些項目，在服務器上部署第三方工具的成本和復雜度太高。 然而，一個低維護解決方案，讓網站看起來不錯，表現良好是可能的，盡管設備的不斷多樣化。 這是WURFL.js發揮作用，通過提供一個可擴展的替代傳統的服務器端設備的檢測，所有的同時補充其他客戶端的技術和工具。
在潛水之前，讓我們來看看基礎知識。
復制，粘貼，完成
無需注冊，并WURFL.js可以免費使用。 因此，要做的第一件事就是復制和這一行的HTML粘貼到您的網頁：
<script type='text/javascript' src=“//wurfl.io/wurfl.js"></script>
HTTP和HTTPS的支持。 如果您打算使用由腳本提供的設備信息來做出決策的渲染，那么你可能希望包含在腳本<head>元素。 否則，你可以異步加載它。
現在，腳本是在你的HTML頁面中，您可以訪問WURFL對象中的JavaScript。 該WURFL對象看起來是這樣的，并準備使用：
{ complete_device_name:"Apple iPhone 5", form_factor:"Smartphone", is_mobile:true }
該對象有三個屬性：
complete_device_name
這是由該設備是已知的名稱 – 典型的是，制造商和型號或類別的設備或一個更通用的定義。form_factor- 桌面
- 應用程序
- 片劑
- 智能手機
- 功能型手機
- 智能電視
- 機器人
- 其他非移動
- 其他手機
is_mobile
這是true還是false–true，如果該設備是平板電腦或其他移動設備。
當然，你可以馬上做的事情是這樣的：
console.log(WURFL);
或這個：
alert(WURFL.complete_device_name);
引擎蓋下
因為WURFL.js檢測的基礎上，該設備User-Agent字符串，并在HTTP頭中提供的其他資料，JavaScript文件的內容將取決于設備上。 所以，你不能只是復制文件的內容，并把它內嵌在HTML或JavaScript的另一個資源相結合。
要理解這一點的細節，讓我們來看看上面的例證。 瀏覽器發出一個請求example.com （1）。 由Web服務器返回的標記（2）包含<script>參考WURFL.js。 接著，瀏覽器呈現的HTML和開始取資產-其中， wurfl.io/wurfl.js （3）。 當請求到達WURFL.io，HTTP請求被WURFL分析。 通常情況下，基于該請求，將會有一炮打響，并且設備被識別事不宜遲，和一個WURFL JavaScript對象返回。 然而，在某些情況下，當設備不能在單獨的服務器側被識別（值得注意的是，在IOS設備的情況下）時，JavaScript文件將包含幾個檢查，以確定該設備。 然后瀏覽器會評估的JavaScript和WURFL對象就可以使用了（4）。
WURFL.js有能力的，例如， 一個iPhone 5和iPhone 5S之間的區別 ，由于這個額外的客戶端邏輯。 這是一個大問題，因為這個用例是支持既不是純粹的User-Agent分析 也不由Modernizr的測試。
一個注績效
如果您使用WURFL.js使渲染的決定，或出于某種原因，你需要將<script>標簽內<head> （不推遲的話），那么瀏覽器將等待被下載和評估之前渲染的腳本該頁面。 根據不同的使用情況下，這可能是唯一的出路; 但是，備案，WURFL.js也可以異步加載，以提高渲染性能。
返回的JSON對象的大小將是相當小的，變化從0.5到3或4 KB，具體取決于設備。 相較于Modernizr的（約14 KB）和jQuery（96 KB），WURFL.js可以說是光。
使用案例
假設你有WURFL.js啟動和運行，讓我們來看看一些案件中，使用WURFL.js是最有意義的，無論是單獨或與Modernizr的和/或其他解決方案相結合。 為了說明這一點，我們將參考WURFL.io網站 本身，它利用WURFL.js在多個方面。
優化用戶體驗
當涉及到移動，反應迅速，適應性設計和一切，最常見的事情做一個網站就是提高某些設備的家庭或外形的用戶體驗。 大部分可以通過媒體查詢來處理，當然，但有時你需要一些JavaScript的幫助。
當您訪問WURFL.io 在筆記本電腦上，頁面的頂部有一個視頻的背景下，一些簡單的視差滾動和動態變化，根據設備或瀏覽器的文本。 它看起來非?？岬囊慌_筆記本電腦，但視頻背景，更何況視差滾動，不會是理想的平板電腦或智能手機，說得客氣一點。
我們可以使用Modernizr的，當然，或決定是否實施在其他方面這些功能。 但在許多情況下，知道物理設備是一樣重要 – 也許比更重要 – 知道瀏覽器是否理賠的功能的支持。 我們可能會遇到一個問題，即在瀏覽器中宣稱支持，但實際支持不夠好，使一個偉大的用戶體驗。
為了避免這些情況下，你會使用WURFL.js和現代化主義者在一起。 還要注意的是比較WURFL.js和Modernizr的直接是不太公平的。 Modernizr的檢測功能聲稱的瀏覽器，而WURFL.js分類裝置以不同的方式。 所以，如果你不知道某個特定的設備或外形是否支持特定的瀏覽器檢測的功能，那么你最好使用Modernizr的或全面的設備檢測解決方案 。
然而，在這個例子中，我們將依靠WURFL.js和需求，只有非移動客戶端獲取視頻的背景和視差滾動：
/*video background*/ if(!WURFL.is_mobile){ $('#vid').videoBG({ mp4:'assets/Birds_Animation.mp4.mp4', ogv:'assets/Birds_Animation.oggtheora.ogv', webm:'assets/Birds_Animation.webmhd.webm' }); } /*The parallax scrolling*/ window.onscroll = function () { if (!WURFL.is_mobile){ heroImage.style[prefixedTransform] = "translate3d(0px," + window.scrollY / 2.3 + "px, 0px)"; herovid.style[prefixedTransform] = "translate3d(0px," + window.scrollY / 1.1 + "px, 0px)"; heroText.style["opacity"] = (1 - ((window.scrollY / 6) / 100)); } }
上面的例子只是簡單地檢查該設備是否是手機（手機或平板電腦），并介紹了相應的功能。 當然，我們也可以利用更細粒度WURFL.form_factor 。
把更多的在CSS中？
上面的例子說明如何在JavaScript中的設備的數據使用。 但是，我們可以提供設備的信息在CSS中，太。 我們可以指定不同的樣式取決于設備，外形尺寸以及是否移動。 第一種方法，我們將看看是類似Modernizr的是如何工作的。 Modernizr的增加了一定的階級，以根據其測試是否返回的HTML文檔true或false 。
比方說，你要在CSS的移動設備定義了一些特定的行為。 你需要下面的JavaScript片段添加到您的網頁：
document.documentElement.className += ' ' + (WURFL.is_mobile ? '' : 'no-') + "mobile";
這將一個類添加到html元素。 對于移動設備，它會說<html class=”is_mobile”> ; 對于其他設備，它會說<html class=”no-is_mobile”> 。
如果你知道Modernizr的，那么你可能熟悉這種方法。 你的CSS可以采取以下形式：
.mobile #menu a{ padding .5em; } .no-mobile #menu a{ padding .1em; }
在這個簡單的例子中，我們已經增加了菜單項的填充，使他們很容易挖掘與脂肪大拇指。
這種方法可以被用于所有的WURFL.js’的能力。 然而，由于complete_device_name和form_factor不是布爾值（如is_mobile ），CSS的部分可以成為一個相當頭痛的問題。 有點更大的靈活性可能會派上用場，然后。 下面是一個使用的示例data-屬性：
document.documentElement.setAttribute('data-device_name', WURFL.complete_device_name); document.documentElement.setAttribute('data-form_factor', WURFL.form_factor );
這將會把與在WURFL功能數據屬性html元素。 我們得到了一些很酷的功能，用此方法：我們可以針對特定的設備，外形，甚至組設備通過使用CSS選擇器相結合的形式因素：
html[data-form_factor = 'Smartphone'] #menu a{ background: green; }
由于通配符屬性選擇 * ，我們甚至可以匹配的字符串：
html[data-device_name*='Nokia'] [data-form_factor = 'Feature Phone'] { background: yellow; }
上面的CSS將匹配諾基亞功能的任何型號的手機。 它也示出了什么DOM的樣子與實施這兩種方法 – 在這種情況下，與iPhone 5S。
協助橫幅廣告
許多不同的廣告網絡都在那里，每個都有自己的專長。 有些是好的移動，其他的桌面。 一些支持文字廣告，其他有固定大小的廣告。 如果你是在超越廣告網絡初學者的水平，那么你可能要承擔過一些這方面的控制。 WURFL.js可以幫助你做出你自己的決定或影響網絡做出正確的決定，你。
最明顯的方法就是問WURFL.is_mobile選擇網絡或廣告，是良好的移動和他人，是良好的非移動。
if(WURFL.is_mobile){ displayMobileAd(); }else{ displayDesktopAd(); }
此外，從設計的角度來看，能夠適應廣告的大小和比例，以您的斷點，并以設計為廣告的不同形式的因素是好的。 在極端情況下，你可以做這樣的事情：
switch(WURFL.form_factor){ case "Smartphone": if(WURFL.complete_device_name.indexOf("Apple") !=-1){ showAppStoreAds(); }else( showWebAds(); ) break; case "Tablet": showSpecificProportionAds(); break; case "Feature Phone": showTextAds(); break; default: showGoogleAdwords(); break; }
結論
如果你已經解決設備在過去的多樣性，那么你就會知道，許多開發人員一直在尋找的JavaScript技巧來檢測瀏覽器，設備和它們各自的特點。 傳統上，一DDR需要服務器端的庫和數據，以進行安裝和用于所述設備的描述信息庫進行更新。 WURFL.js是免費提供的選項來管理這些問題。
你可能要考慮WURFL.js或類似的庫的分析，用戶體驗和廣告優化，該庫可以很好地補充Modernizr的。 而Modernizr的檢測用于在瀏覽器的某些功能的支持，WURFL.js提供關于用戶的物理設備的信息。
WURFL.js是在服務器端和客戶端之間的橋梁，使它更容易為前端Web開發人員能夠利用過去屬于服務器上的功能優勢。 它也可以用于對已設計的響應或逐步增強當前網站。
