思洋互动网站建设学前班

特定外形的WEB App例子

有许多针对不同因素提供不同Web服务版本的例子。谷歌搜索是这样，Facebook也是。这主要是考虑了到性能（获取资源，渲染页面）和更通用的用户体验。

在Native App的世界里，许多开发者选择为不同种类的设备设计产品。 例如，Flipboard iPad版本的UI与iPhone版本差异很大。平板版本为双手使用和水平旋转进行了优化，而手机版本关注单手交互和垂直翻转的体验。许多其他的iOS应用在手机和平板上也有明显的不同，例如Things（Todo list）和如下所示的 Showyou （社会化视频）：
广州网站建设,网站建设,广州网页设计,广州网站设计

 

针对手机和平板定制的UI

方法＃1：服务器端检测

在服务器端，我们要了解正在处理的设备有更多的限制。每次请求发送的User-Agent头所提供的user agent（用户代理）字符串可能是最有用的线索。正因为如此，相同UA的嗅探方法会产生作用。事实上，DeviceAtlas和WURFL项目已经开始这样做了（并提供了一大堆设备有关的其他信息）。

不幸的是目前这些项目都存在挑战。WURFL非常庞大，包含20MB的XML，可能为每个请求导致明显的服务器开销。有项目因为性能方面的原因分割了这些XML。DeviceAtlas并不开源，需要付费使用。

这里有更简单，而且免费的替代品，例如检测移动浏览器项目。当然，缺点是设备检测难免会不够全面。 此外，它只区分移动和非移动设备，以及通过ad-hoc软件提供有限的平板支持。

方法2：客户端检测

使用特性检测，我们可以了解更多用户浏览器和设备的信息。我们需要确定的要点是，该设备是否具有触摸功能，以及它的屏幕是大是小。

我们需要画一条线来区分屏幕大和小的触摸设备。例如像5寸Galaxy Note的边缘情况。下图显示了许多流行的Andr​​oid和iOS设备轮廓（附上相应的屏幕分辨率）。星号表示该设备可以支持双倍密度。虽然像素密度可能会增加一倍，CSS仍然会报告相同的大小。

对CSS里像素点的快速介绍：手机Web页面上的CSS像素和PC上并不一样。iOS视网膜设备引入了双倍像素密度（例如iPhone 3GS对iPhone 4，iPad 2对iPad 3）。视网膜设备上Safari浏览器的用户代理仍然报告相同的设备宽度，以免破坏网页。当其它设备（例如Android）采用了更高分辨率的显示屏时，它们也采用了相当的解决方案。

广州网站建设,网站建设,广州网页设计,广州网站设计

 

设备的分辨率

这种方式会更复杂，但是这对考虑同时兼容纵向和横向模式非常重要。我们不希望每次屏幕旋转时都重新加载页面或者加载额外的脚本，虽然我们可能要呈现不同的页面。

下图中，正方形代表每个设备的最大尺寸，是叠加了纵向和横向轮廓的结果：

 

横向+纵向分辨率

通过将阈值设置为650px ，我们将iPhone，Galaxy Nexus分类为小触摸屏设备，而将iPad，Galaxy Tab分类为“平板”。跨界的Galaxy Note在这种情况下被归类为“手机”，将采用手机布局。

所以，一个合理的策略可能看起来像下面这样：

1. if (hasTouch) {   
2.   if (isSmall) {   
3.     device = PHONE;   
4.   } else {   
5.     device = TABLET;   
6.   }   
7. } else {   
8.   device = DESKTOP;   
9. } 

赶快看看一个小的示例特性检测方法吧。

另一种方法是使用用户代理嗅探来检测设备类型，基本上就是创建一套试探方法来匹配用户的navigator.userAgent。伪代码看起来像这样：

1. var ua = navigator.userAgent;   
2. for (var re in RULES) {   
3.   if (ua.match(re)) {   
4.     device = RULES[re];   
5.     return;   
6.   }   
7. } 

马上来看看一个示例-UA检测方法。