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