同一個頁面同時適配手機端和PC端的方案

需求為點開同一個鏈接，在手機端和PC端進行不同的頁面展示，但是頁面內元素在手機端和PC端大體一致。

這里我使用了媒體查詢，對電腦和手機分別寫了一套不同的css。

即

@media screen and (max-width: 480px){
    /* 手機端css */
}
@media screen and (min-width: 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為手機端
}