从一道前端面试题说起

最近在学习微信小程序的开发，涉及到移动端设备适配的知识点，想到之前秋招一位面试官问我的问题–怎么判断用户是用什么设备访问的，是pc端还是移动端？我回答的是根据屏幕分辨率大小尺寸，他又表示电脑端也可以竖屏。。。然后我就不知道了，后来他也给我讲了应该怎么解决，现在时间有点久了答案已经忘了，于是决定搜集资料写篇博客记录这个问题。网上给出的大多数方案，用js判断的原理是浏览器提交的user agent，不管是PC还是手机浏览器。

第一种，使用indexOf判断

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<script>
var userAgentInfo = navigator.userAgent;
var mAgents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var pAgents = new Array("Trident", "Presto", "Gecko", "Webkit");
var flag = false;
for (var v = 0; v < mAgents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; }
}
if (flag) {
    // 来自于移动端，同理判断PC浏览器
}
</script>

第二种，使用正则表达式判断

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<script>
function browserRedirect() {
    var ua = navigator.userAgent.toLowerCase() || window.navigator.userAgent.toLowerCase();
    var isWX = /MicroMessenger/i.test(ua),
        isIOS = /(iPhone|iPad|iPod|iOS)/i.test(ua),
        isAndroid = /(android|nexus)/i.test(ua),
        isBlackBerry = /BlackBerry/i.test(ua),
        isWindows = /(Window Phone|windows[\s+]phone)/i.test(ua),
        isMidp = /midp/i.test(ua);
    document.writeln("您的浏览设备为：");
    if (isWX || isIOS || isAndroid || isBlackBerry || isWindows || isMidp) {
        document.writeln("phone");
    } else {
        document.writeln("pc");
    }
}
browserRedirect();
</script>

除此之外，在移动端开发时有的项目还要考虑到兼容横竖屏。