打包之后，因为页面只有一个，那应该如何判断用户是通过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");
}