如何判断是pc端还是移动端

有时候会被别人问起pc端和手机端有什么区别。一般来说都会去说，兼容性啊，适配啊，网页布局这方面的事情，但是我觉得这个问题如果想要拿一个满分应该从区别出发，从如何判断收尾。毕竟你只知道区别没有用，他可能更想让你说出来你是怎么判断的。

像是面试的时候如果你自己主动说出来扯一堆王八犊子也很能拖延时间。说不定会给面试加分。

从区别入手

Pc端需要考虑的是浏览器的兼容性，不能局限于我们常用的谷歌浏览器，要为客户那边考虑，而手机端需要为不同的型号做考虑，安卓ios华为。同时也要更多考虑手机分辨率的适配。不同操作系统的细微差异。

在布局上，手机端因为要去做布局的自适应，所以可以围绕rem去说一说

关于接口上，手机端会多出很多常见功能，比如微信的支付接口，微信的朋友圈转发，分享文章什么的，支付宝的支付接口，包括高德地图百度地图的这些接口，都是做app会常用的，如果你是一个经验丰富的前端。这里会巩固你的项目经验。

Pc端和手机端在事件处理上区别不大，pc端没有触屏，手机端没有悬停事件，同时手机端多了一个键盘的弹出。

动画效果处理上，pc常用js去做动画，手机端去做动画特效会更倾向使用css3

同时相较用户来说，因为触屏的操作尺度非常大，所以在图标和按钮的处理上会更倾向于放大一些让用户有一个更好的视觉体验。

关于如何辨别是pc端还是手机端

这里参照了阮一峰老师9月份的文章，我上网找资料的时候发现很多人不会标注原作者直接转载。只能说阮一峰老师一个人养活了很多博客主。

目前来说比较常用的是通过js去拿navigator.userAgent这个属性，这是一个字符串，如果里面包含mobi，andorid，iphone等关键词就可以判断为移动设备。

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {

// 当前设备是移动设备

}

// 另一种写法

if (

navigator.userAgent.match(/Mobi/i) ||

navigator.userAgent.match(/Android/i) ||

navigator.userAgent.match(/iPhone/i)

) {

// 当前设备是移动设备

}

然后有一个更简单的方法就是通过屏幕宽度判断是否为手机。直接获取window.screen。由于手机端屏幕普遍干不过电脑端，所以可以很简单的去识别是否为手机。

Window还提供了一种方法为window.orientation，这个属性用于判断手机是否是横屏，如果不是移动设备的话你获取这个属性会返回undefined。

第四种是触发touch事件，通过trycatch去为手机端的dom元素执行touch事件，如果捕获异常则证明是pc端。

其他的可以通过各种工具包轮子去判断。常用方法大概就这几种。