打包之后,因为页面只有一个,那应该如何判断用户是通过5+App访问还是浏览器访问还是其他方式访问的呢?
我们第一时间想到的肯定是通过判断用户的userAgent来区分用户的访问渠道。废话不多说,直接写代码:
var ua = navigator.userAgent;
alert(ua);
这段代码的意思是通过JavaScript拿到用户的userAgent,然后打印出来。为什么要打印出来?当然是为了查看各个访问渠道有什么不一样的地方。
1:首先来看下华为手机,通过浏览器访问页面时打印的userAgent参数内容,如下图:
2:华为手机使用微信访问时打印的userAgent参数,如下图:
3:华为手机使用5+App访问时打印的userAgent参数,如下图:
通过上述三个不同渠道的访问和打印userAgent参数,大家有没有发现什么特别的地方?第一个肯定是三个不同渠道访问时打印的userAgent参数都不同;第二个就是最后一张图,通过5+App访问时出现了一个关键字,就是“Html5Plus”,这个关键字很特殊,因为他代表了这个APP的打包类型。
那到这一步,我们是不是就可以直接通过判断userAgent参数中有没有“Html5Plus”关键字来确认是否是5+App访问的呢?
我觉得还不够严谨,因为我们刚刚测试时使用的是同一个手机,为了更加严谨,需要测试下其他品牌的手机,同一个品牌不同型号的手机等情况是否也会出现“Html5Plus”这个关键字。
于是我立马找来了一台小米手机,接下来,我们一起看一下,小米手机不同渠道访问时打印的userAgent会有什么特殊的地方?
1:小米手机使用内置浏览器访问时打印的userAgent参数,如下图:
2:小米手机使用微信访问时打印的userAgent参数,如下图:
3:小米手机使用5+App访问时打印的userAgent参数,如下图:
到这一步,我们发现,小米手机使用5+App访问时打印的userAgent参数同样出现了“Html5Plus”这个关键字,而其他渠道则没有这个关键字。于是我立马又去找了其他同事的手机进行测试和打印,发现不管是什么品牌,什么型号的手机,只要是使用5+App访问,打印出来的userAgent参数就会出现“Html5Plus”这个关键字。
所以我们只需要判断一下userAgent参数中有没有“Html5Plus”这个关键字,就可以知道用户当前是5+App访问还是浏览器访问了,具体代码如下:
/** * 判断当前页面是5+App内打开还是浏览器打开 */ function check_app() { var ua = navigator.userAgent; if(ua.indexOf('Html5Plus') > -1){ return true; }else{ return false; } } /** * 如果不是APP端,则调整头部样式 */ if(!check_app()){ $(".header").css("padding", 0); $("body").css("margin-top", "-5vw"); }