判断客户端设备

移动端和PC端通常需要不同的展示效果，目前有两种解决思路：

1. 响应式布局
2. 为PC和移动端彻底设计两套页面（后台接口一般是相同的）

对于方法1，如果不使用任何CSS库，实现难度较大，而且效果不一定好。即使用媒体查询等技术能够很容易实现响应式布局，对于十分复杂的页面，响应式布局还是做不到极致的用户体验的，它必须在样式上做出妥协。

对于大型项目，一般都是采用第二种方法。用户浏览器访问网站地址，首先响应的就是PC版页面，但是PC版页面会判断客户端设备，如果是移动端设备，就直接重定向到另一个为移动端设计的页面，通常部署在一个移动端专用的子域名上。

方法1：响应式布局简介

响应式布局主要就是利用CSS的媒体查询实现的，而且一般只是用到判断设备屏幕大小。

.anchor-nav {
    background-color: #ffffff;
}
@media screen and (max-width: 460px) {
    .anchor-nav {
        background-color: #000000;
    }
}

上面例子CSS代码中，会在设备屏幕宽度小于460像素时，应用@media内部的样式替代外部的样式。

除此之外，有些JavaScript操作也需要判断屏幕宽度，我们同样判断下屏幕宽度就行：

if ($(window).width() > 460) { }

方法2：判断客户端设备类型

如何从本质上判断客户端设备是PC端还是移动端呢？移动端主要是Android和iPhone手机，以及iPad等平板电脑，它们浏览器的User-Agent一般包含有对应系统的字符串，我们只要区分User-Agent字符串就行了。

function isMobile()
{
  return /Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent);
}

实际上，确实有移动设备使用PC的User-Agent的情况，但这种一般属于特殊情况了，我们一般不予考虑。