同一个页面同时适配手机端和PC端的方案

需求为点开同一个链接，在手机端和PC端进行不同的页面展示，但是页面内元素在手机端和PC端大体一致。

这里我使用了媒体查询，对电脑和手机分别写了一套不同的css。

即

@media screen and (max- 480px){
    /* 手机端css */
}
@media screen and (min- 481px){
    /* PC端css */
}

在处理事件时，如果处理结果不同，也需要进行js判断，然后书写两份js。

js判断代码为：

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;//true为PC端，false为手机端
}