js区分访问设备

Posted on Edited on In

需求是王道，有需求才有折腾的动力。

昨天在写结婚照分享的页面时，布局采用了一行三章的方式，于是每张照片的宽度定义为33%。

PC下访问一切ok，但是换用手机端访问后发现有问题，三张照片有两张在一行上，另一张就掉到下一行去了。看起来很怪异。
于是想给PC访问和移动端访问做一个自适应设计。移动端屏幕下，一行就显示一张就可以了。

判断方法

判断访问终端是手机还是PC，大体上有以下几种方法：

  1. 终端平台
  2. 操作系统
  3. 浏览器内核
  4. userAgent
    ……

这几种方法都需要利用到js的navigator对象来获取相应的信息，具体的navigator知识可以参考：w3school Navigator对象
navigator都有哪些可以使用的属性可以在浏览器的终端里查看下。
经我实验，appName，platform，appVersion，useragent等可以获得当前设备信息。

但有些信息准确度上就不好说了。appName和platform的误差可能会有，上图中我的64bit Chrome，appName和platform分别是”Netscape”、”Win32”。

代码实例

采用userAgent获取设备信息判断终端类型

1
2
3
4
5
6
7
8
9
10
11
12
13
function isPc(){
	var userAgentInfo = navigator.userAgent;
	//可识别的移动终端，支持以下
	var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
	var flag = true;
	for(var i=0,len=agents.length;i<len;i++){
		if(userAgentInfo.indexOf(agents[i]) != -1){
			flag = false;
			break;
		}
	}
	return flag;
}

获取到了设备信息后，在判断出是移动端访问后，将宽度33%的设置去除，恢复100%，于是移动端的访问体验也恢复了。