有很多策略从现在发展一个现代的，与设备无关的济南网站建设时选择。 应如何设备或浏览器的能力来决定的？ 应该表现逻辑是服务器端或客户端？ 传统上，手机优化必须发生服务器端。
在过去的几年中，响应性的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开发人员能够利用过去属于服务器上的功能优势。 它也可以用于对已设计的响应或逐步增强当前网站。
近期评论